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
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 :
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 (currentTime ) 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.
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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1657
14
1415
52
1309
25
1257
29
1231
24
Comment réparer l'erreur fatale VIDEO DXGKRNL dans Windows 11
Apr 13, 2023 pm 08:22 PM
Cliquez pour entrer : Collection de navigation du plug-in de l'outil ChatGPT Certains utilisateurs se sont plaints que leurs ordinateurs tombaient fréquemment en panne avec le code d'arrêt VIDEO DXGKRNL FATAL ERROR. Ce problème particulier ne se produit qu'occasionnellement et a une valeur de contrôle de bogue de 0x00000113, ce qui indique une violation dans le sous-système du noyau graphique Microsoft DirectX, comme l'indique la valeur de contrôle de bogue. Habituellement, l'erreur se produit lorsqu'un pilote corrompu interfère avec le fonctionnement normal du processeur graphique de la carte graphique. Si vous rencontrez actuellement ce problème spécifique, notre article vous fournira une variété de conseils de dépannage de haute qualité. Vous trouverez ci-dessous diverses méthodes que d'autres utilisateurs ayant rencontré exactement la même erreur ont utilisées avec succès. Oui
Soundcore Space One Pro : Anker dévoile le casque supra-auriculaire le plus cher à ce jour
Jun 26, 2024 pm 03:07 PM
Anker propose à la fois un large portefeuille de produits, qui comprend non seulement diverses catégories de produits, mais également de nombreux produits au sein de chaque catégorie. Les produits audio ne font pas exception à cet égard, Anker proposant des casques très abordables ainsi que
Le Motorola Razr 50 Ultra apparaît dans une vidéo teaser divulguée avec un boîtier étanche et un énorme écran secondaire
Jun 20, 2024 pm 09:31 PM
Au cours des dernières semaines, les spécifications les plus importantes et les prix en euros du Motorola Razr 50 et du Razr 50 Ultra ont été divulgués. Maintenant, le leaker extrêmement fiable @MysteryLupin a pu publier la vidéo teaser intégrée ci-dessous, qui
Lancement du lecteur de cassettes FiiO CP13 avec un look rétro transparent
Jun 16, 2024 am 09:52 AM
Le lecteur de cassettes FiiOCP13 a été annoncé en janvier. Désormais, FiiO élargit son portefeuille avec deux nouveaux modèles, l'un avec une façade rouge et l'autre avec une façade transparente. Ce dernier non seulement correspond parfaitement au charme rétro du design angulaire, mais aussi
Klipsch dévoile la barre de son phare Flexus Core 300 avec prise en charge 8K, 12 haut-parleurs et correction de pièce
Sep 05, 2024 am 10:16 AM
Le Klipsch Flexus Core 300 est le modèle haut de gamme de la série et se positionne au-dessus du Flexus Core 200 déjà disponible dans la gamme de barres de son de l'entreprise. Selon Klipsch, il s'agit de la première barre de son au monde dont le son peut être adapté aux besoins.
Que signifie h5 ?
Aug 02, 2023 pm 01:52 PM
H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. mûrit progressivement et devient populaire, je pense qu'il jouera un rôle de plus en plus important dans le monde d'Internet.
Comment distinguer H5, WEB front-end, big front-end et WEB full stack ?
Aug 03, 2022 pm 04:00 PM
Cet article vous aidera à distinguer rapidement entre H5, WEB front-end, grand front-end et WEB full stack. J'espère qu'il sera utile aux amis dans le besoin !
Doogee S punk : Smartphone robuste avec haut-parleurs puissants, LED configurables et batterie 10800 mAh
Jun 14, 2024 am 09:12 AM
Doogee proposera bientôt un nouveau smartphone avec un argument de vente unique sous la forme d'un grand haut-parleur à l'arrière. Il est clairement visible et domine visuellement l'arrière. La puissance de sortie maximale est spécifiée comme 4 watts, et selon le fabricant
