So fügen Sie Videos auf einer Webseite mit HTML hinzu und spielen Sie Videos ab?

Jean Dengler

HTML (Hypertext Markup Language) ist eine Markup -Sprache, die zum Erstellen von Webseiten verwendet wird. Sie enthält Funktionen zum Einbetten von Multimedia -Inhalten wie Videos. Das Hinzufügen und Abspielen von Videos auf einer Webseite mit HTML ist eine Möglichkeit, Videoinhalte auf einer Website anzuzeigen. Auf diese Weise können Website -Eigentümer die Benutzererfahrung verbessern, Besucher einbeziehen und Informationen dynamischer und zwanghafter kommunizieren.

Dieser Artikel zeigt, wie Sie auf einer Website Videos hinzufügen und abspielen können:

"" Schild
"" Schild
“" Schild</strong></li> <li><strong> "" Schild</strong></li> <li><strong>Bonus: Videos aus Online -Quelle wie YouTube einbetten</strong></li> </ul> <p>Methode 1: Verwenden von "” -Tag</p> <p>Um das Video auf der Webseite anzuzeigen, ist die am meisten empfohlene Methode die “" Schild. Dieses Tag verwendet das “Tag als Kind, das die Adresse und den Typ der Datei erhält. Nach der Bereitstellung der Quelle des Videos können Benutzer es auf der Website anzeigen:</p> <br><h1> Angetrieben von LinuxHint </h1><br><video controls width="50%" height="50%"><br><source src="sea.mp4" type="video/mp4"/><br></video><br> <p>Im obigen Code -Snippet die <strong>"" Tag verwendet "Steuerelemente", "Breite" und "Höhe"</strong> Attribute zum Hinzufügen von Steuerelementen für das Video sowie seine Höhe und Breite. Allerdings die <strong>""</strong> Tag hat viele weitere Attribute, um bestimmte Funktionen auszuführen. </p> <p>Nach der Ausführung des Codes sieht die Webseite so aus:</p> <p> <br>Die obige Ausgabe zeigt, dass das Video hinzugefügt wurde und auf der Webseite abgespielt wird.</p> <p>Methode 2: Verwenden von "” -Tag</p> <p>Das Objekt -Tag kann auch verwendet werden, um das Video auf einer Webseite anzuzeigen. Während es einen Container erstellt, in dem die Mediendateien und Plug-in-Anwendungen eingefügt werden können. Darüber hinaus konsumiert es weniger Codezeilen und ist leicht zu ändern:</p> <br><h1>Angetrieben von LinuxHint</h1><br><br><br><object data="sea.mp4" height="255px" width="450px" ></object><br> <p>Im obigen Code -Snippet:</p> <p>- Um das Video mit der “einfügen zu können”Tag, fügen Sie den Videopfad als Wert für seine" ein. "<strong>Daten</strong>”Attribut.</p> <p>- Dann verwenden Sie die “<strong>Höhe und Breite</strong>”Attribute zum Festlegen der Dimensionen/Größe des Videos auf der Webseite.</p> <p>Nach dem Ausführen des obigen Codes:</p> <p>Die Ausgabe bestätigt, dass das Video im Fenster abgespielt wird.</p> <p>Methode 3: Verwenden “<iframe>" Schild</p> <p>Der "<strong><iframe></strong>”Tag kann verwendet werden, um Videos auf einer Webseite hinzuzufügen und abzuspielen, da sie stark mit den übergeordneten Dokumenten verbunden sind. Es hilft dabei. Der Code zum Hinzufügen von Videos aus dem lokalen Verzeichnis in der HTML -Datei lautet:</p> <br><h1>Angetrieben von LinuxHint</h1><br><br><br><iframe src="sea.mp4" height="255px" width="450" >

Im obigen Code -Snippet:

Zunächst wird die übergeordnete DIV so gestaltet, dass die enthaltenen Elemente im Zentrum der Webseite angezeigt werden.

Dann ist die "</strong>" Schild "<strong>src</strong>Das Attribut wird zum Speichern des Videoweges verwendet.</li> <li>Danach die Größe des Videos festlegen “<strong>Höhe</strong>" Und "<strong>Breite</strong>”Attribute der“<strong><iframe></strong>”Tag werden verwendet.</li> </ul> <p>Nach der Ausführung des obigen Code sieht die Webseite so aus:</p> <p>Die obige Ausgabe zeigt an, dass das Video auf der Website hinzugefügt und gespielt wurde.</p> <p>Methode 4: Verwenden von "” -Tag</p> <p>Der "Das Tag kann auch zum Hinzufügen und Abspielen von Videos auf der Webseite verwendet werden. Dieses Tag kann auch zum Anzeigen von Bildern und HTML -Dateien verwendet werden:</p> <br><h1>Angetrieben von LinuxHint</h1><br><br><br><embed type="video/mp4" src="sea.mp4" width="400" height="300"><br> <p>In diesem Code,</p> <p>- Ein Video ist in eine HTML -Seite mit der Quelldatei eingebettet<strong>Meer.MP4</strong>”Und eine Breite und Höhe von 400 bzw. 300 Pixel.</p> <p>- Das Video wird in einem zentrierten Behälter mit der Überschrift angezeigt “<strong>Angetrieben von LinuxHint</strong>" über.</p> <p>Nachdem die obige Code -Snippet ausgeführt wurde, sieht die Webseite so aus:</p> <p>Das obige GIF zeigt, dass das Video mit der “auf der Webseite hinzugefügt und gespielt wird" Schild.</p> <p>Bonus: Videos aus Online -Quelle wie YouTube einbetten</p> <p>Um das Video von einer Website von Drittanbietern wie YouTube zu betten, ist das “<strong><iframe>" Und "</strong>Tags können sehr nützlich sein. Mit diesen Tags können Entwickler Videos direkt auf die Website einbetten, ohne diese Videos herunterzuladen. Um dies auszuführen, ist der Einbettungsvideo -Link erforderlich, auf das durch die folgende kurze Anleitung zugegriffen werden kann:</p> <ul> <li>Wählen Sie zunächst das YouTube -Video, den der Benutzer auf seiner Webseite anzeigen möchte. Öffnen Sie dann die Optionsliste für dieses Video. Finden und wählen Sie danach die “<strong>Aktie</strong>" Möglichkeit:</li> </ul> <ul> <li>Danach wird das kurze Fenster geöffnet und wählen Sie das aus<strong>Einbetten</strong>”Option von hier:</li> </ul> <ul> <li>Danach wird der Einbettungsvideo -Link generiert und kopiert die URL:</li> </ul> <p>Nach dem Kopieren der “<strong>Einbetten</strong>"Videocode, fügen Sie ihn als Wert der" ein<strong>src</strong>”Attribut in“<strong><iframe></strong>" Schild:</p> <br><h1>Angetrieben von LinuxHint</h1><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/NSAOrGb9orM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen><br>

Jetzt das gleiche YouTube -Video mit dem "anzeigen" anzeigen" Schild. Einlegen Sie die “src”Attributwert in“Daten”Attribut der“" Schild:

Nach der Ausführung der oben genannten Codes sieht die Webseite so aus:

Im obigen GIF wurde das erste YouTube -Video auf der Webseite angezeigt.

Abschluss

Um Videos auf der Webseite hinzuzufügen und abzuspielen, können Benutzer die “nutzen“",", "", Und "</strong>”HTML -Tags. Der ""Tag wird von der" verpackt "”Tag zum Anzeigen der Videodatei auf der Webseite. Für die "<strong><iframe></strong>Tag, Platzieren Sie den Pfad des Bildes in seine “<strong>src</strong>”Attribut. Und für die "Tag platzieren Sie den Bildpfad als Wert für die “<strong>Daten</strong>”Attribut. Dieser Artikel hat gezeigt, wie Sie mit HTML Videos auf einer Webseite hinzufügen und abspielen können.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://www.cyberaxe.org/article/how-to-create-html-bullet-points">« So erstellen Sie HTML -Bullet -Punkte?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Wie kann Flexbox verwendet werden, um eine Navigationsleiste zu erstellen?? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-trim-a-string-in-golang">Wie man eine Saite in Golang schneiden</a> </div> <div class="white-news__text"> String Trimming ist ein Prozess, in dem zusätzliche Räume oder Zeichen von Anfang oder Ende einer Ze... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-throw-keyword-in-c">So verwenden Sie Wurf Keyword in C#</a> </div> <div class="white-news__text"> Das Wurf -Schlüsselwort ist wie eine Sprungerklärung in C#, die eine Ausnahme ausschöpfen kann. Ausn... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/what-is-sqlite-used-for-is-it-better-than-sql">Wofür wird SQLite verwendet?? Ist es besser als SQL?</a> </div> <div class="white-news__text"> SQLite ist eine dateibasierte Datenbank, die in sich geschlossen ist, serverlos und keine separate I... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/arved-riermeier">Arved Riermeier</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/python-oserror">Python Oserror</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-docker-and-podman">Was ist der Unterschied zwischen Docker und Podman?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-php-serialize-function">So verwenden Sie PHP -Serialisierungsfunktion</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/prof-dr-julien-plank">Prof. Dr. Julien Plank</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-fetch-php-timezone-list">So holen Sie die PHP -TimeZone -Liste</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-connect-to-oracle-database-top-10c-using-sql-developer">Mit SQL Developer können Sie eine Verbindung zu Oracle Database Top 10C herstellen?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/kaya-wyludda">Kaya Wyludda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-should-be-minimum-system-specifications-for-oracle-linux">Was sollte minimale Systemspezifikationen für Oracle Linux sein?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-typescript-is-different-from-javascript">Wie Typenkript von JavaScript unterscheidet?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-java-one-line-if-statement">So verwenden Sie Java One -Zeile, wenn Anweisung?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/fedora">Fedora</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-enable-the-rpm-fusion-repository-on-fedora">So aktivieren Sie das RPM -Fusions -Repository auf Fedora</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-defer-keyword-in-golang">So verwenden Sie das Defer -Schlüsselwort in Golang</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>