suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung des Videocodes in HTML5

Detaillierte Erklärung des Videocodes in HTML5

寻∝梦
寻∝梦Original
2018-08-13 18:53:013608Durchsuche

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">

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

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5eDas

-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">

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>

HTML5-Video-Tag

39000f942b2545a5315c57fa3276f220 definiert ein Video

e02da388656c3265154666b7c71a8ddc definiert mehrere Medienressourcen, wie 39000f942b2545a5315c57fa3276f220

9bf7cbf2c39baa37076a22499de2f6edDefiniert 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">

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

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5eDas

-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.

[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!

JavaScript html5 firefox chrome safari html 事件 dom
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5Nächster Artikel：Wozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5

In Verbindung stehende Artikel

Mehr sehen