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/aws">AWS</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/why-should-i-use-aws-organizations">Warum sollte ich AWS -Organisationen verwenden??</a> </div> <div class="white-news__text"> AWS -Organisationen können viele Konten in der Cloud verwalten, um Unternehmen zu helfen, die sich s... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/docker">Docker</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-does-docker-differ-from-docker-desktop">Wie unterscheidet sich Docker vom Docker -Desktop??</a> </div> <div class="white-news__text"> Docker ist eine Plattform, die CLI zum Verwalten von Containern bietet. Während Docker Desktop eine ... </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/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/can-i-use-sqlite-online">Kann ich SQLite online verwenden??</a> </div> <div class="white-news__text"> Ja, Sie können SQLite online über die SQLite Viewer -Web -App, die Erweiterung der Klasse oder das A... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</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/numpy-save-dict">Numpy Save Dict</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</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/how-to-use-xrange-in-python">So verwenden Sie Xrange in Python</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/arved-riermeier">Arved Riermeier</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/seaborn-axis-labels">Etiketten der Seeborn -Achse</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/salesforce">Zwangsversteigerung</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Liste</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/html">html</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-css-flex-grow-property">So verwenden Sie CSS Flex-Grow-Eigenschaft?</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-aws-batch-and-lambda">Was ist der Unterschied zwischen AWS -Batch und Lambda?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</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-oracle-database-is-different-from-oracle-sql-developer">Wie sich die Oracle -Datenbank vom Oracle SQL -Entwickler unterscheidet?</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/oracle-database">Oracle -Datenbank</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-type-of-database-is-oracle-top-10g">Welche Art von Datenbank ist Oracle Top 10g?</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-check-typescript-version">So überprüfen Sie die TypeScript -Version</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/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">So verwenden Sie das CMDLet für Bewegung in PowerShell?</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> <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>