So fügen Sie Videos in HTML hinzu, spielen sie ab und steuern sie

Mit der Entwicklung der Internettechnologie beginnen immer mehr Websites, Videos zur Anzeige von Inhalten zu verwenden. Für Website-Entwickler ist die Frage, wie man Videos zu Webseiten hinzufügt und sie normal abspielt, eine häufige Frage. In diesem Artikel erfahren Sie, wie Sie Videos in HTML hinzufügen, abspielen und steuern.

1. Video-Tag in HTML5

Die Möglichkeit, ein Video in HTML5 hinzuzufügen, besteht darin, ein Video-Tag in den HTML-Code einzufügen. Verwenden Sie insbesondere die folgenden Tags:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

In diesem Code wird das Attribut „src“ verwendet, um die URL der Videodatei zu definieren. Wie im obigen Code gezeigt, stellen „movie.mp4“ und „movie.ogg“ die dar MP4 bzw. OGG des Videos. Wenn der Browser die Videowiedergabe unterstützt, wird eines davon zur Wiedergabe ausgewählt. Wenn keines der Videos unterstützt wird, wird der Inhalt im letzten Tag angezeigt: „Ihr Browser unterstützt das Video-Tag nicht.“

Unter diesen können „Breite“ und „Höhe“ verwendet werden, um die Breite und Höhe des Videos anzugeben. Das Attribut „controls“ wird verwendet, um eine Steuerleiste für den Videoplayer hinzuzufügen.

2. Steuern Sie die Videowiedergabe

Nachdem wir das Video hinzugefügt haben, können wir das Video über den folgenden Code steuern:

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

Unter anderem werden die Funktionen „play()“ und „pause()“ zum Abspielen und Anhalten des Videos verwendet video bzw. das Attribut currentTime Wird zum Festlegen der aktuellen Zeit der Videowiedergabe verwendet, und das Attribut volume wird zum Festlegen der Lautstärke des Videos verwendet.

3. Unterstützt Videodateien in mehreren Formaten

Damit mehr Browser die Videowiedergabe unterstützen können, können Videodateien in mehreren Formaten verwendet und mehrere Quellen gleichzeitig bereitgestellt werden.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Hier werden drei verschiedene Formate für verschiedene Browser und Betriebssysteme bereitgestellt, um die Breite der Videoabdeckung sicherzustellen.

4. Option zum Vorladen von Videos

Das Video-Tag in HTML5 bietet auch das Attribut „Vorladen“ Sie können das Video im Voraus herunterladen, wenn die Seite geladen wird, um Videoverzögerungen zu vermeiden.

Unterstützt drei Werte für das Preload-Attribut:

• preload = „none“: Nicht im Voraus herunterladen.
• preload = „metadata“: Laden Sie die Metadaten des Videos herunter, z. B. Videodauer, Audiospur und andere Informationen.
• preload = „auto“: Laden Sie die gesamte Videodatei herunter.

Wenn dem Preload-Attribut der Wert „auto“ zugewiesen wird, wird das Video während des Seitenladevorgangs heruntergeladen. Zu diesem Zeitpunkt kann der Ladestatus des Videos über JavaScript abgerufen werden.

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. YouTube-Videos in Webseiten verwenden

Neben der direkten Einbettung von Videodateien über Video-Tags können Sie auch YouTube-Videos für die Videowiedergabe einbetten. Die konkrete Umsetzung ist wie folgt:

• Zuerst müssen Sie das Video finden, das Sie auf YouTube einbetten möchten.
• Fügen Sie der Seite den folgenden HTML-Code hinzu:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps: Die „VIDEO_ID“ hier ist die eindeutige Kennung des Videos.

• Anschließend passen Sie den CSS-Stil wie gewohnt an.

6. Browserkompatibilität

Die Methode zum Hinzufügen von Videos in HTML5 wird in modernen Browsern weitgehend unterstützt, aber es gibt immer noch einige ältere Browser, die HTML5-Videos nicht unterstützen. Diese Browser können die Videowiedergabe über JavaScript und Flash unterstützen.

• Über JavaScript: Sie können Bibliotheken wie video.js oder JWPlayer verwenden.
• Über Flash: Betten Sie den Flash-Player über swfobject und swfmedia in die Seite ein und laden Sie dann das Video.

Zusammenfassung

In diesem Artikel erfahren Sie, wie Sie Videos in HTML hinzufügen, abspielen und steuern, und stellt einige häufig verwendete Wiedergabefunktionen vor. Während des eigentlichen Entwicklungsprozesses sollten Entwickler auf Kompatibilitätsprobleme achten und Videodateien in verschiedenen Formaten bereitstellen, um sicherzustellen, dass jeder Browser die Videowiedergabe perfekt unterstützt.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Videos in HTML hinzu, spielen sie ab und steuern sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!