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/windows-os">Windows OS</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/usb-mouse-and-keyboard-stop-working-issue-in-windows-fixed">USB -Maus und Tastatur stoppen Sie das Problem der Arbeit in Windows [behoben]</a> </div> <div class="white-news__text"> Um USB -Maus- und Tastatur -Stopp -Arbeitsprobleme zu beheben, den Hardwarefehler zu überprüfen, die... </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/aws">AWS</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/what-is-devops-in-aws">Was ist DevOps in AWS?</a> </div> <div class="white-news__text"> DevOps in AWS wird verwendet, um die Effizienz von DevOps zu maximieren, die hauptsächlich zur Optim... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/getting-started-with-powershell-and-the-pswindowsupdate-module">Erste Schritte mit PowerShell und dem PswindowsUpdate -Modul</a> </div> <div class="white-news__text"> Das Modul „PswindowsUpdate“ hilft bei der Verwaltung von Windows -Updates. Es wird installiert, aktu... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</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/filter-nan-pandas">Filter Nan Pandas</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/python-count-characters-in-string">Python Count Charaktere in String</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-mouseevent-screenx-property-in-javascript">So verwenden Sie die MouseEvent ScreenX -Eigenschaft in JavaScript</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-create-html-bullet-points">So erstellen Sie HTML -Bullet -Punkte?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</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-to-login-into-docker-via-command-prompt">So melden Sie sich über die Eingabeaufforderung bei Docker an?</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/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-append-to-an-array-in-php">So hängen Sie ein Array in PHP an?</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/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-are-constants-in-golang">Was sind Konstanten in Golang?</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/linux-commands">Linux -Befehle</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-start-a-multicast-traffic-in-iperf">So starten Sie einen Multicast -Verkehr in Iperf</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/debian">Debian</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-and-use-gparted-on-debian">So installieren und verwenden Sie GParted auf Debian</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> <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>