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> </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/c">C ++</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-compile-and-run-a-c-program-in-a-linux-terminal">Wie man ein C ++ - Programm in einem Linux -Terminal kompiliert und ausführt</a> </div> <div class="white-news__text"> Verwenden Sie den G ++ - Compiler, um ein C ++ - Programm in einem Linux -Terminal zu kompilieren un... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/frederik-rodehau">Frederik Rodehau</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-function-references-in-c">So verwenden Sie Funktionsreferenzen in C ++</a> </div> <div class="white-news__text"> Funktionsreferenzen im Vergleich zu herkömmlichen Funktionsaufrufen können Programmierer ganze Funkt... </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/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-packages-with-flatpak-on-debian-top-10">So installieren Sie Pakete mit Flatpak auf Debian Top 10</a> </div> <div class="white-news__text"> Flatpak ist ein moderner Paketmanager, der auf Debian aus dem Flatpak -Repository installiert werden... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</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/convert-a-string-to-json-python">Konvertieren Sie eine Schnur in JSON Python</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/frederik-rodehau">Frederik Rodehau</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-turn-on-remote-desktop-on-pc">So schalten Sie Remote -Desktop auf dem PC ein</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/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-can-i-list-all-docker-commands">Wie kann ich alle Docker -Befehle auflisten??</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-ec2-is-different-from-elastic-beanstalk">Wie sich EC2 von elastischer Beanstalk unterscheidet?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/break-and-continue-statements-in-c">Brechen und Aussagen in C# fortsetzen</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</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/why-php-should-be-used-in-web-development">Warum PHP in der Webentwicklung verwendet werden sollte</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-while-loop-in-c">Was ist während der Schleife in C++?</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> <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/what-is-oop-abstract-class-in-php">Was ist oop abstrakte Klasse in PHP?</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-fix-error-with-multiple-definitions-of-a-function-in-c">So beheben Sie Fehler mit mehreren Definitionen einer Funktion in C ++</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/frederik-rodehau">Frederik Rodehau</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c-programming">C -Programmierung</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-compile-and-run-a-c-program-in-command-prompt">So kompilieren und führen Sie ein C -Programm in der Eingabeaufforderung aus und führen Sie sie aus</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</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>