Ausführliche Erläuterung von HTML5 mit DOM für benutzerdefinierten Steuerelement-Beispielcode

Obwohl

HTML5-Videos Steuerelemente verwenden können, um die -Steuerelemente anzuzeigen und die Wiedergabe und Pause usw. zu steuern, können die Anzeigeeffekte verschiedener Browser unterschiedlich sein. Lassen Sie uns mit Ihnen teilen, wie das geht Verwenden Sie es. Dom wird verwendet, um einige benutzerdefinierte Vorgänge und Steuerelemente auszuführen

Obwohl HTML5-Videos Steuerelemente verwenden können, um Steuerelemente anzuzeigen und die Wiedergabe und Pause usw. zu steuern, können verschiedene Browser unterschiedliche Effekte anzeigen, so dass wir sie oft verwenden müssen Dom, um einige benutzerdefinierte Vorgänge und Kontrollen durchzuführen. Nachfolgend finden Sie ein kleines Beispiel.
Natürlich ist der Effekt nicht sehr schön. Wenn Sie möchten, dass er gut aussieht, können Sie den CSS-Stil selbst festlegen.

<div id="video_div" style="text-align:center;"> 
<button onclick="playPause()">播放/暂停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 
  
<video id="myVideo" width="500" height="250" style="margin-top:15px;"> 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的浏览器不支持此HTML5 视频标签。 
</video> 
</div>

<script type="text/javascript"> 
var myVideo=document.getElementById("myVideo"); 
function playPause() 
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
myVideo.pause(); 
} 
function toBig() 
{ 
myVideo.width=560; 
} 
function toNormal() 
{ 
myVideo.width=420; 
} 
function toSmall() 
{ 
myVideo.width=320; 
} 
</script>

Es ist zu beachten, dass von allen Eigenschaften nur die Eigenschaften videoWidth und videoHeight sofort verfügbar sind.

Andere Eigenschaften sind erst verfügbar, wenn die Metadaten des Videos geladen wurden.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von HTML5 mit DOM für benutzerdefinierten Steuerelement-Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!