Explication détaillée de HTML5 utilisant DOM pour un exemple de code de contrôle personnalisé

Bien que les vidéos

HTML5 puissent utiliser des contrôles pour afficher les contrôles et contrôler la lecture et la pause, etc., les effets d'affichage des différents navigateurs peuvent être différents. pour l'utiliser. Dom est utilisé pour effectuer certaines opérations et contrôles personnalisés

Bien que les vidéos HTML5 puissent utiliser des contrôles pour afficher les contrôles et contrôler la lecture et la pause, etc., différents navigateurs peuvent afficher différents effets, nous en avons donc souvent besoin. Utilisez 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.

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

Il est à noter que parmi toutes les propriétés, seules les propriétés videoWidth et videoHeight sont immédiatement disponibles.

Les autres propriétés 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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!