Detaillierte Erklärung des Videocodes in HTML5-H5-Tutorial-php.cn

Detaillierte Erklärung des Videocodes in HTML5

寻∝梦

Freigeben： 2018-08-13 18:53:01

Original

3587 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um einige Kapitel von HTML5Video, die eher für Anfänger geeignet sind, um etwas über HTML5 zu lernen. Probieren wir die Struktur dieses Elements aus.

HTML5-Video

Viele Websites verwenden HTML5 als Standard für die Anzeige von Videos.

Videos auf Websites

Bisher gab es keinen Standard für die Anzeige von Videos auf Webseiten.

Heutzutage werden die meisten Videos über Plug-ins (z. B. Flash) angezeigt. Allerdings verfügen nicht alle Browser über die gleichen Plugins.

HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Element.

Hinweis: Internet Explorer 8 oder frühere IE-Versionen werden nicht unterstützt .

HTML5 (Video) – So funktioniert es

Um ein Video in HTML5 anzuzeigen, brauchen Sie nur:

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt den HTML5-Video-Tag nicht.

Das

-Element bietet Wiedergabe-, Pausen- und Lautstärkeregler zur Steuerung Video.

Gleichzeitig stellt das Elementelement auch Breiten- und Höhenattribute bereit, um die Größe des Videos zu steuern. Wenn Höhe und Breite festgelegt sind, wird beim Laden der Seite der erforderliche Videoraum reserviert. . Wenn diese Eigenschaften nicht festgelegt sind und der Browser die Größe des Videos nicht kennt, kann der Browser beim Laden keinen bestimmten Platz reservieren und die Seite ändert sich basierend auf der Größe des Originalvideos. Der zwischen

und Tags eingefügte Inhalt wird für die Anzeige in Browsern bereitgestellt, die das Videoelement nicht unterstützen. Das

-Element unterstützt mehrere Elemente, die verschiedene Videodateien verknüpfen können. Der Browser verwendet das erste erkannte Format:

HTML5 – Steuerung über das DOM. Das

HTML5 und die Elemente verfügen außerdem über Methoden, Eigenschaften und Ereignisse. Die Methoden, Eigenschaften und Ereignisse von

und Elementen können mit JavaScript gesteuert werden. Die Methoden von

werden zum Abspielen, Anhalten und Laden verwendet. Die Eigenschaften (wie Dauer, Lautstärke etc.) können ausgelesen bzw. eingestellt werden. Die DOM-Ereignisse können Sie beispielsweise benachrichtigen, wenn die Wiedergabe eines Elements beginnt, angehalten wird, gestoppt wurde usw.

Die einfache Methode im Beispiel zeigt uns, wie man das Element verwendet, Attribute liest und setzt und wie man Methoden aufruft.

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt das HTML5-Video-Tag nicht.

</video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

Nach dem Login kopieren

HTML5-Video-Tag

definiert mehrere Medienressourcen, wie

Definiert in der Textspur des Media Players

HTML5 (Video) – So funktioniert es

Um Videos in HTML5 anzuzeigen, benötigen Sie lediglich:

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Nach dem Login kopieren

Ihr Browser unterstützt das HTML5-Video-Tag nicht.

Das

-Element bietet Wiedergabe-, Pausen- und Lautstärkeregler zur Steuerung Video.

und Tags eingefügte Inhalt wird für die Anzeige in Browsern bereitgestellt, die das Videoelement nicht unterstützen.

[Verwandte Empfehlungen]

Grundelemente von HTML, damit Sie HTML von Grund auf lernen können

HTML5 Verwendung Videoelement

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Videocodes in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!