Contrôle de lecture de la balise vidéo HTML5

Cet article présente principalement le contrôle de lecture de la balise vidéo HTML5. Cet article explique comment obtenir la durée totale de la vidéo, lire, mettre en pause, obtenir le temps de lecture de la vidéo, définir le point de lecture, obtenir et définir le temps de lecture. le volume, etc. Les amis qui en ont besoin peuvent Pour référence,

L'article précédent présentait certains travaux à effectuer pour initialiser la vidéo de balise html5 (lecteur), et comment utiliser le lecteur html5 simplement et rapidement. Cet article se concentrera sur la façon d'utiliser JS pour faire fonctionner la balise vidéo, c'est-à-dire comment effectuer certaines opérations simples et basiques sur la vidéo, notamment la lecture et la pause du lecteur, la lecture et le réglage du volume, ainsi que d'autres opérations liées à l'écriture, commençant ainsi l'expansion du joueur.

Table des matières de cet article :

1. Obtenez la durée totale de la vidéo
2. Jouez et mettez en pause
3. heure de la vidéo et définir le point de lecture
4. Acquisition et réglage du volume

Tout d'abord, obtenez la durée totale de la vidéo

Pour faire fonctionner le lecteur (vidéo), la première chose à obtenir est certaines informations de la vidéo, dont la durée totale. En plus du contenu, la durée totale est également la première chose à afficher. Avant d'exploiter la vidéo, ajoutez un identifiant à la balise vidéo, afin que nous puissions obtenir facilement l'élément vidéo

<video id="myVideo" controls preload="auto" width=300 height="165" 
     poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" 
     src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
    </video>

Après avoir défini un identifiant, nous pouvons démarrer l'opération. Pour obtenir la durée totale, utilisez An. événement vers la vidéo -loadedmetadata. Le déclenchement de cet événement indique que les métadonnées (certaines informations de base du média) ont été chargées. Utilisez addEventListener pour écouter l'événement

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
    //要执行的代码
});
     好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration
var myVideo = document.getElementById('myVideo')//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
    tol = myVideo.duration;//获取总时长
});

. a noté que l'unité obtenue de la durée totale est la seconde, qui peut être convertie selon les besoins lors de l'affichage.

Deuxièmement, lire et mettre en pause

La fonction la plus basique pour le lecteur est la lecture et la pause, et après avoir obtenu la durée totale, l'opération suivante est la lecture et la pause . Les deux méthodes de vidéo utilisées actuellement sont la lecture et la pause

var myVideo = document.getElementById('myVideo')//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
  tol = myVideo.duration;//获取总时长
 });</p>
<p> //播放
 function play(){ 
     myVideo.play();
 }</p>
<p> //暂停
 function pause(){ 
     myVideo.pause();
 }

Il convient de noter que l'exécution de la méthode de lecture après la fin de la lecture la lira depuis le début.

Troisièmement, obtenez la durée de lecture de la vidéo et définissez le point de lecture

Une fois que le lecteur peut lire et mettre en pause, la prochaine chose que vous devez voir est la durée la vidéo a été lue, quel moment est joué. Cette opération est très similaire à l'obtention de la durée totale. Elle nécessite de surveiller un événement et d'obtenir la valeur d'un attribut. Ensuite, l'événement timeupdate et l'attribut currentTime de la vidéo sont utilisés

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});

Après l'exécution. La console voit beaucoup de données...

Nous recevons souvent une demande, c'est-à-dire que la dernière fois que nous l'avons vu, c'était 10 minutes, et cette fois nous voulons commencer à le visualiser à partir de la dixième minute, puis nous devons le définir à ce moment-là. Le point de lecture est défini. L'attribut currentTime est toujours utilisé pour définir le point de lecture. L'attribut currentTime est lisible et inscriptible. Il convient de noter que l'unité de la valeur de réglage est la seconde. le point de lecture n'est pas en secondes, il doit être converti

//设置播放点
function playBySeconds(num){ 
    myVideo.currentTime = num;
}

Quatrièmement, obtenir et régler le volume

Le lecteur peut mettre en pause et jouer pendant la lecture , et savoir où il joue maintenant et peut commencer à partir d'un certain moment. Commencez à jouer, puis l'opération suivante est le volume. Ceci est similaire au troisième point. Vous pouvez utiliser directement l'attribut volume pour obtenir le volume. Cependant, ce que nous présenterons également ici est l'événement déclencheur du changement de volume. À l'avenir, nous devrons personnaliser l'interface utilisateur pour l'utiliser. c'est-à-dire l'événement volumechange

//音量改变时
myVideo.addEventListener("volumechange", function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});

Lorsque vous modifiez le volume via la barre de contrôle, vous verrez beaucoup de données dans le débogueur. Il convient de noter que la plage de volume est de 0 à 1 et que les pourcentages sont généralement utilisés dans l'interface utilisateur, une conversion est donc requise si nécessaire.

Le volume peut être réglé en modifiant l'attribut, qui est similaire au point temporel de lecture, sauf que le volume est réglé avec l'attribut volume

//设置音量
function setVol(num){ 
   myVideo.volume = num;
}

Ce qui suit est le code complet :

   
   



   
<script>
var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
   ,tol = 0 //总时长
;
myVideo.addEventListener("loadedmetadata", function(){
   tol = myVideo.duration;//获取总时长
});</p> <p>//播放
function play(){ 
   myVideo.play();
}</p> <p>//暂停
function pause(){ 
   myVideo.pause();
}</p> <p>//播放时间点更新时
myVideo.addEventListener(&quot;timeupdate&quot;, function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});</p> <p>//设置播放点
function playBySeconds(num){ 
   myVideo.currentTime = num;
}</p> <p>//音量改变时
myVideo.addEventListener(&quot;volumechange&quot;, function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
   myVideo.volume = num;
}
</script>

Résumé : utilisez ces quatre étapes pour comprendre les opérations de base de la balise vidéo html5 (lecteur), et ces opérations se font principalement via JS pour surveiller les événements vidéo et lire et écrire les attributs vidéo Une fois terminé, vous pouvez utiliser le lecteur de manière flexible une fois familiarisé avec ces quatre points, puis l'ajuster en fonction du scénario d'application.

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 :

Utilisez HTML5 Méthode Canvas pour dessiner des polygones tels que des triangles et des rectangles

À propos de l'analyse de contrôle des nouveaux attributs audio et vidéo H5

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!