HTML5 utilise DOM pour le contrôle personnalisé

Cet article présente principalement l'utilisation du DOM pour le contrôle personnalisé en HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Bien que les vidéos HTML5 puissent être affichées. avec des contrôles Contrôles et contrôle la lecture, la pause, etc., mais différents navigateurs peuvent afficher différents effets Partageons avec vous quelques opérations et contrôles personnalisés à l'aide de Dom. Bien que les vidéos HTML5 puissent utiliser des contrôles pour afficher les contrôles et contrôler la lecture, la pause, etc., différents navigateurs peuvent afficher différents effets, nous devons donc souvent utiliser Dom pour effectuer certaines opérations et contrôles personnalisés. Ci-dessous un petit exemple.
Bien sûr, l'effet n'est pas très beau. Si vous voulez que ça soit beau, vous pouvez définir vous-même le style CSS.

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

Il est à noter que parmi toutes les propriétés, seules les propriétés videoWidth et videoHeight sont immédiatement disponibles.
Les propriétés supplémentaires ne sont pas disponibles tant que les métadonnées de la vidéo n'ont pas été chargées.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter une barre de progression simple côté mobile via des événements tactiles HTML5

Html5 mobile side est une implémentation d'animation de défilement primée et transparente

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!