Notes d'étude sur la balise vidéo HTML5 (lecteur) (2) : compétences du didacticiel control_html5 en lecture

L'article précédent présentait certains travaux à effectuer pour initialiser la balise vidéo 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, et également 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, démarrant ainsi l'expansion du lecteur.

Table des matières de cet article :

1. Obtenez la durée totale de la vidéo
2. Lecture et pause
3. Obtenez la durée de lecture de la vidéo et définissez le point de lecture
4. Obtenez et réglez le 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 que vous devez obtenir est quelques 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 de la vidéo - les métadonnées chargées. Le déclenchement de cet événement indique que les métadonnées (quelques informations de base du média) ont. été chargé. Utilisez addEventListener Événements d'écoute

Copier le code

Le code est le suivant :

var myVideo = document.getElementById( 'myVideo');//Récupérer l'élément vidéo
myVideo.addEventListener("loadedmetadata", function(){
//Code à exécuter
});
D'accord, il a déjà été écouté. Ensuite, la prochaine chose à faire est d'obtenir la durée totale, qui est en fait un attribut-durée
var myVideo = document.getElementById('myVideo')//Obtenir l'élément vidéo
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//Obtenir la durée totale
});

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, mettez en pause

La fonction la plus basique pour le lecteur est la lecture et la pause. 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

Copiez le code

Le code est le suivant :

var myVideo = document.getElementById('myVideo')//Obtenir l'élément vidéo
, tol = 0
;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//Obtenir la durée totale
});

//Lecture
fonction play(){
myVideo.play();
}

//Pause
function pause(){
myVideo.pause();
}

Il est à noter que la méthode de lecture est exécutée après la lecture est terminé sera joué 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 d'écouter 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

<.>Copier le codeLe code est le suivant :

//Lorsque le point temporel de lecture est mis à jour
myVideo.addEventListener("timeupdate" , function(){
var currentTime = myVideo.currentTime;//Obtenir l'heure de lecture actuelle
console.log(currentTime);//Imprimer dans le débogueur
});


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 regardé 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à. 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 définie est la seconde. Si le point de lecture n'est pas en secondes, il doit être converti
.

Copiez le code

Le code est le suivant :

//Définissez le point de lecture
fonction playBySeconds(num){
myVideo.currentTime = num;
}

Quatrièmement, obtention et réglage du volume

Le lecteur peut mettre en pause et jouer pendant le processus de lecture. Il sait où il joue maintenant et peut commencer à jouer à partir d'un certain moment. Ensuite, 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 de changement de volume

Copier le code

Le code est le suivant :

/ /Quand le volume change
myVideo.addEventListener("volumechange" , function(){
var volume = myVideo.volume;//Obtenir le volume actuel
console.log(volume);//Imprimer dans le débogueur
});

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

Copier le code

Le code est le suivant :

//Régler le volume
fonction setVol(num){
myVideo.volume = num;
}

Voici le code complet :

Copiez le code

Le le code est le suivant :

poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src=" http://www.w3cschool.cc/try /demo_source/mov_bbb.mp4">

<script><br>var maVideo = document.getElementById('myVideo')/ /Obtenir l'élément vidéo <br> ,tol = 0 //Durée totale<br>;<br>myVideo.addEventListener("loadedmetadata", function(){<br> tol = myVideo.duration;//Obtenir la durée totale <br>});</p> <p>//Play<br>fonction play(){ <br> myVideo.play();<br>}</p> <p>//Pause<br>function pause(){ <br> myVideo.pause();<br>}</p> <p>//Lorsque le point temporel de lecture est mis à jour<br>myVideo.addEventListener("timeupdate", function(){<br> var currentTime = myVideo.currentTime;//Obtenir l'heure de lecture actuelle<br> console. log(currentTime );//Imprimer dans le débogueur<br>});</p> <p>//Définir le point de lecture<br>fonction playBySeconds(num){ <br> myVideo.currentTime = num;<br>}</p> <p>//Quand le volume change<br>myVideo.addEventListener("volumechange", function(){<br> var volume = myVideo.volume;//Obtenir le volume actuel<br> console.log(volume) ;/ /Imprimer dans le débogueur<br>});</p> <p>//Définir le volume<br>fonction setVol(num){ <br> myVideo.volume = num;<br>}<br></script>

< ;/html>

Résumé : utilisez ces quatre étapes pour comprendre les opérations de base de la balise vidéo html5 (lecteur), et ces opérations visent principalement à surveiller les événements vidéo et à manipuler les attributs vidéo via JS. complété par la lecture et l'écriture. Si vous connaissez ces quatre points, vous pouvez utiliser le lecteur de manière flexible, puis l'ajuster en fonction du scénario d'application.