Maison > Article > interface Web > 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
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
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
//Lecture
fonction play(){
myVideo.play();
}
//Pause
function pause(){
myVideo.pause();
}
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
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
.
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
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