Maison >interface Web >Tutoriel H5 >Explication détaillée des nouveaux attributs H5, exemples de codes de contrôle audio et vidéo

Explication détaillée des nouveaux attributs H5, exemples de codes de contrôle audio et vidéo

黄舟original: 2017-05-19 16:53:251842parcourir

Cet article présente principalement les détails de contrôle (recommandé) des nouveaux attributs H5 audio audio et vidéo vidéo (recommandé). . Si vous êtes intéressé, les étudiants peuvent en apprendre davantage.

Cet article parle du contrôle de l'audio et de la vidéo, les nouveaux attributs du H5, comme suit :

1. Audio (audio)

<audio controls="controls">
<source src="这里面放入音频文件路径"></source>
</audio>

2. Vidéo

 <video controls="controls" loop="loop" autoplay="autoplay" id="video">
<source src="这里面放入视频文件路径"></source>
</video>
<button>静音</button>
 <button>打开声音</button>
 <button>播放</button>
 <button>停止播放</button>
 <button>全屏</button>

Ce qui suit est le contrôle des fichiers vidéo

javascriptexportation.

<script>
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
    myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
    myVideo.muted=true;(是否静音：否)
}
btn[2].click=function(){
    myVideo.play();(播放)
}
btn[3].click=function(){
    myVideo.pause();(停止播放)
} 
btn[4].click=function(){
    myVideo.webkitrequestFullscreen();(全屏显示)
}  
</script>

3. Comment définir la barre de progression et la durée de lecture vidéo

à synchroniser.

Comme le montre l'image :

Explication détaillée des nouveaux attributs H5, exemples de codes de contrôle audio et vidéo

Permettez-moi d'en parler ici. Tout d'abord,

(1), la durée totale de. la vidéo doit être obtenue (durée) Attribuez la valeur maximale à la barre de progression, progress.max=video.duration;

(2), besoin d'obtenir la position temporelle actuelle de la lecture vidéo en cours (current Time ) est assigné à la longueur de la barre de progression actuelle, progress.value=video.currentTime;

Puis pendant la lecture de la vidéo, il faut assurez-vous que la valeur de la barre de progression peut obtenir la durée de la vidéo et la position actuelle de la lecture dans le temps.

Vous devez ouvrir un timer setInterval(pro, 100); : c'est-à-dire obtenir la valeur de la vidéo une fois toutes les millisecondes et l'attribuer à la barre de progression, afin de garantir l'actualité.

De cette façon, la barre de progression peut être synchronisée avec précision avec la vidéo.

4. Comment utiliser l'attribut range de l'élément de formulaire pour contrôler le volume de la vidéo.

1. Tout d'abord, vous devez obtenir la valeur de la plage et l'attribuer au volume de la vidéo pour contrôler le volume de la vidéo

<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");

Obtenir la plage. .value,

Attribuez l'attribut audio à la vidéo : video.volume=range.value/100;

À ce stade, vous pouvez simplement faire glisser la plage pour contrôler le volume de la vidéo.

Ensuite, vous devez juger si le son précédent est désactivé. Les deux sont des événements indépendants. Par conséquent, vous devez juger s'il est coupé dans l'événement de glisser, puis le mettre en sourdine. à faux.

Explication détaillée des nouveaux attributs H5, exemples de codes de contrôle audio et vidéo

Le code final implémenté est le suivant

<!DOCTYPE html> 
<html> 
<body> 
<video id="video1" controls="controls" width="400px" height="400px">
<source src="img/1.mp4">
</video>
<p>
<button onclick="enableMute()" type="button">关闭声音</button>
<button onclick="disableMute()" type="button">打开声音</button>
<button onclick="playVid()" type="button">播放视频</button>
<button onclick="pauseVid()" type="button">暂停视频</button>
<button onclick="showFull()" type="button">全屏</button><br />
<span>进度条:</span>
<progress value="0" max="0" id="pro"></progress>
<span>音量:</span>
<input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</p>
<script>
var btn=document.getElementsByTagName("button");
var myvideo=document.getElementById("video1");
var pro=document.getElementById("pro");
var ran=document.getElementById("ran");
//关闭声音
function enableMute(){
myvideo.muted=true;
btn[0].disabled=true;
btn[1].disabled=false;
}
//打开声音
function disableMute(){
myvideo.muted=false;
btn[0].disabled=false;
btn[1].disabled=true;
}
//播放视频
function playVid(){
myvideo.play();
setInterval(pro1,1000);
}
//暂停视频
function pauseVid(){
myvideo.pause();
}
//全屏
function showFull(){
myvideo.webkitrequestFullscreen();
}
//进度条展示
function pro1(){
pro.max=myvideo.duration;
pro.value=myvideo.currentTime;
}
//拖动range进行调音量大小
function setvalue(){
myvideo.volume=ran.value/100;
myvideo.muted=false;
}
 </script>
</body> 
</html>

[Recommandations associées]

1 Explication détaillée de ; la balise vidéo de l'application de test html5

2 Utilisez l'élément vidéo en HTML 5 pour créer un lecteur vidéo

3 Partagez une vidéo. tag qui ne peut pas lire le mp4 Et la solution

4 La solution pour le tag vidéo H5 qui ne peut lire que le son mais pas la vidéo

5. IIS MIME n'est pas enregistré de type MP4, la solution à l'impossibilité de reconnaître la balise vidoe

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de partage de code pour la création d'une animation de grille de particules dynamique à l'aide de HTML5 CanvasArticle suivant：Explication détaillée de l'exemple de partage de code pour la création d'une animation de grille de particules dynamique à l'aide de HTML5 Canvas

Articles Liés

Voir plus