HTML5 verwendet DOM zur benutzerdefinierten Steuerung

Dieser Artikel stellt hauptsächlich die Verwendung von DOM für die benutzerdefinierte Steuerung in HTML5 vor. Jetzt kann ich ihn mit Ihnen teilen.

Obwohl HTML5-Videos angezeigt werden können mit Steuerelementen Steuerelemente und steuern Wiedergabe, Pause usw., aber verschiedene Browser zeigen möglicherweise unterschiedliche Effekte an. Lassen Sie uns einige benutzerdefinierte Vorgänge und Steuerelemente mit Dom teilen. Obwohl HTML5-Videos Steuerelemente verwenden können, um Steuerelemente anzuzeigen und Wiedergabe, Pause usw. zu steuern, können verschiedene Browser unterschiedliche Effekte anzeigen. Daher müssen wir häufig Dom verwenden, um einige benutzerdefinierte Vorgänge und Steuerelemente auszufü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.

<p id="video_p" 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> 
</p>

<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.
Zusätzliche Eigenschaften sind erst verfügbar, wenn die Metadaten des Videos geladen wurden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie einen einfachen Fortschrittsbalken auf der mobilen Seite durch HTML5-Touch-Ereignisse

Html5 Mobile side ist eine preisgekrönte und nahtlose Scroll-Animationsimplementierung

Das obige ist der detaillierte Inhalt vonHTML5 verwendet DOM zur benutzerdefinierten Steuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!