Explication détaillée de la vidéo de fonctionnement des balises vidéo HTML5

Cette fois je vais vous apporter une explication détaillée du fonctionnement de la balise vidéo HTML5 vidéo Quelles sont les précautions pour le fonctionnement de la balise vidéo HTML5 Voici un cas pratique. Jetons un coup d'oeil.

Dans les recherches actuelles sur la production de sites Web, des personnes de tous horizons n'ont pas cessé de l'utiliser et ont étudié en permanence. Parmi eux, l'utilisation du HTML5 est une grande avancée pour les balises vidéo HTML5. Je crois que beaucoup de gens ne savent toujours pas comment contrôler la lecture. Cet article vous présentera les méthodes spécifiques de contrôle de la lecture. Si vous êtes intéressé, apprenons-en ensemble.

Contenu de cet article :

1. Obtenez la durée totale de la vidéo

2. Jouez, mettez en pause

3. Obtenez la durée de lecture de la vidéo et définissez le point de lecture

4. Acquisition et réglage du volume

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

Lors de l'utilisation du lecteur (vidéo), la première chose à obtenir est certaines informations sur 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

Copier le code

Le code est le suivant :

Après avoir défini un identifiant, vous pouvez démarrer l'opération. Pour obtenir la durée totale, vous devez utiliser un événement -loadedmetadata de la vidéo. Le déclenchement de cet événement indique que les métadonnées (quelques informations de base de la vidéo. media) a été chargé, utilisez addEventListener pour écouter les événements

. Copier le code

Le code est le suivant :

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要执行的代码
});

D'accord, maintenant que vous l'avez surveillé, la prochaine chose à faire est d'obtenir la durée totale, qui est en fait un attribut -duration

var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});

Il est à noter que l'unité de la durée totale obtenue est la seconde, qui doit être convertie selon les besoins lors de l'affichage.

Deuxièmement, jouez et mettez en pause

La fonction la plus basique du 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

Copier le code

Le code est le suivant :

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 lorsque la lecture est terminée et que la méthode de lecture est ensuite exécutée, la lecture recommencera 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 de lecture de la vidéo et l'heure à laquelle elle a été lue. 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 de la vidéo et l'attribut currentTime

sont utilisés. . Copier le code

Le code est le suivant :

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

Après l'exécution, vous verrez beaucoup de données sur la console...

Nous recevons souvent une demande, c'est-à-dire que cela fait 10 minutes que nous l'avons vu pour la dernière fois. Cette fois, nous voulons commencer à le regarder à partir de la dixième minute. Ensuite, nous devons définir le point de lecture à ce moment-là. utilisé pour définir le point de lecture. L'attribut currentTime Il est lisible et inscriptible. Il convient de noter que l'unité de la valeur de réglage est la seconde. Si 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 faire une pause et jouer pendant le processus de lecture. Il sait où se trouve actuellement la lecture et peut commencer la lecture à partir d'un certain moment. L'opération suivante est ensuite 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 de changement de volume

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

Lorsque vous modifiez le volume via la barre de contrôle, vous verrez qu'il y a beaucoup de données dans le débogueur. Il convient de noter que la valeur de plage du volume est comprise entre 0 et 1. Généralement, le pourcentage est utilisé dans l'interface utilisateur, il doit donc être converti si nécessaire.

Le volume peut être réglé en modifiant les attributs, ce 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;
}

Voici 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("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
myVideo.volume = num;
}
</script>

总结：通过这四个步骤来了解html5标签video（播放器）的基本操作，而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的，熟悉这四点即可灵活的在使用播放器，再根据应用场景来调整即可。       

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

django控件及传参使用详解

Echarts实现动态变色柱状图

jQuery操作textarea输入字数限制

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!