Avant la sortie de HTML5, l'audio et la vidéo en ligne étaient réalisés à l'aide de Flash ou d'outils tiers. Désormais, HTML5 prend également en charge cette fonction. Dans un navigateur prenant en charge HTML5, l'audio et la vidéo peuvent être lus sans installer de plug-ins. La prise en charge native de l'audio et de la vidéo injecte un énorme potentiel de développement dans HTML5.
Intégration audio dans HTML (méthode traditionnelle) : bien que cette méthode puisse être implémentée, elle nécessite que le navigateur prenne en charge Flash et ne peut pas être contrôlée, elle est donc très difficile à mettre en œuvre.
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
Cela signifie donc qu'il y a un gros problème avec HTML5, qui est la compatibilité. Audio
Formats audio pris en charge par HTML5 : vidéoFormat vidéo :
Il ressort de ce qui précède que HTML5 semble prendre en charge quelques formats, donc lorsque vous constatez que l'audio et la vidéo ne sont pas affichés lors de l'utilisation de HTML5, cela devrait être un problème que le format ne soit pas pris en charge. Remarque : MP4 a 3 encodages, mpg4(xdiv),,mpg4(xvid), avc(h264). Seul h264 est l'encodage standard MP4 reconnu (je suis également dupe ici, les autres formats n'ont que du son mais pas d'images.) Si vous rencontrez ce genre de problème, utilisez simplement un convertisseur de format vidéo pour convertir le format et tout ira bien.
L'audio est très simple à mettre en œuvre : la barre d'outils utilise ici la barre d'outils par défaut du navigateur.
<audio src=htmls/1.mp3 CONTROLS=Controls Loop=loop preload=auto >Votre navigateur ne prend pas en charge l'élément vidéo</audio>
Bien que la valeur par défaut du navigateur puisse être utilisée pour les vidéos, la personnalisation privée n'est pas possible, donc d'un point de vue technique, vous devez toujours apprendre à créer vos propres outils pour implémenter des fonctions (l'audio peut également faire référence à cette méthode).
audioVidéo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Placer la vidéo sur la page Web</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 contrôles=contrôles boucle=boucle précharge=auto >Votre navigateur ne prend pas en charge l'élément vidéo</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 CONTROLS=controls loop=loop poster=3.jpg>Votre navigateur ne prend pas en charge l'élément audio <!-- MP4 a 3 encodages, mpg4(xdiv),,mpg4(xvid), avc(h264), Seul h264 est le codage standard MP4 reconnu--></video><div id=progress></div><!-- Contrôle du volume--><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- Informations sur la vitesse et la progression dans le temps--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>Jouer</button><button onclick=Fast()>Avance rapide</button><button onclick=Slow()>Avance lente</button><button onclick=Prev() >Précédent</button><button onclick=Next()>Avant</button><button onclick=Muted(this)>Muet</button></body></html>
L'affichage (html) et l'implémentation de fonctions (js) sont séparés et importés de l'extérieur.
ControlBar.js
//Utiliser un script pour détecter la prise en charge des balises du navigateur var support = !!document.createElement(audio).canPlayType;if (!support) {alert(votre navigateur ne prend pas en charge la lecture de cette vidéo);}//Définir un objet vidéo global var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Forward : une minute*/function Next() {e1.currentTime+=10; //Définissez la propriété currentTime, avance rapide de 10 s}/*Rewind : une minute*/function Prev() {e1.currentTime-=10; //Définissez la propriété currentTime, revenez en arrière de 10 s}/ *Lecture/ Pause*/fonction Lecture(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Avance lente : Lorsqu'il est inférieur ou égal à 1, il ne ralentit que de 0,2 à chaque fois ; lorsqu'il est supérieur à 1, il diminue de 1 à chaque fois */fonction Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Avance lente : Lorsqu'il est inférieur ou égal à 1, il ne ralentit que de 0,2 à chaque fois ; lorsqu'il est supérieur à 1, il diminue de 1 à chaque fois */fonction Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}fonction fps2fps(fps ){if(fps<1){retour fps.toFixed(1);}else{return fps;}}/*Mute*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Ajuster le volume*/fonction Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Informations de progression : contrôlez la barre de progression et affichez le temps de progression*/fonction Progress( ) {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}fonction s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* Une fois la page Web chargée, ajoutez la fonction de traitement de progression à l'événement timeupdate de l'objet vidéo*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Ajouter une progression au Événement window.onload Fonction de traitement */window.addEventListener(load,Progress);Fonctions implémentées : lecture, pause, avance rapide, avance lente, avant, arrière, contrôle du volume, barre de progression et affichage de l'heure. On peut voir que des fonctions plus complexes peuvent être réalisées grâce aux propriétés et méthodes de l'audio ou de la vidéo.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.