l'api audio video
introduction
les balise video et audio du html5 permettent de lire de façon simpliste une video ou de l'audio mais elles permettent aussi grâce a son api de créer son propre player et c'est ce que nous allons étudier.
Format video et audio
au niveau des format la norme est tres élastique car elle n'oblige pas d'adopter un seul et unique format c'est le navigateur qui a en charge le support du format soit il incorpore le codec soit il le fera par l'intermédiaire du système d'exploitation et des codec installé il faudra dans ce cas installer le codec. Utiliser le codec de l'os évite de payer des redevances pour l'éditeur du navigateur quand celui ci n'est pas libre.
format video
ogg (theora vorbis) : l'ogg est un conteneur comme l'avi, le mp4...etc. Une video en ogg utilise comme codec video le theora et pour l'audio le vorbis l'avantage de ce format c'est qu'il est libre il est supporte par Firefox opéra et chrome
mp4 (h264 aac) : pour ce conteneur la video est en h264 et l'audio en aac le format est propriétaire il est reconnu par safari chrome internet explorer et pour firefox a partir firefox 34.
webm (vp8 ou vp9 vorbis) : il s'agit d'un conteneur matroska light la video est en vp8 ou vp9 et l'audio en vorbis il est reconnu par opéra Firefox et chrome.
qualite des format
au niveau qualité video le theora est le moins bon pour les format h264 et vp8 c'est asser floue car les inventeurs du vp8 le vante comme étant meilleur que le h264 mais du fait de sa jeunesse les encodeurs ne son pas aussi bien optimiser que les encodeurs pour h264, actuellement les différences entre ces deux codec son minime avec un avantage pour le h264. Quand au vp9 il est de meilleur qualité mais face au h265 est légèrement moins bon a qualité égale un fichier de 100 mo en h265 pèsera approximativement 108 mo en vp9
un autre paramètre a prendre en compte c'est la qualité de restitution du media par le navigateur qui peut différé.
format audio
wav pcm : c'est le format wav nom compresse sans perte seul internet explorer ne le reconnais pas.
mp3 : on ne le présente plus son principale défaut c'est de n'être pas libre il est reconnu par tous les navigateurs mais pour Firefox il faudra installer le codec dans l'os
ogg vorbis : le conteneur est l'ogg et le codec le vorbis seul internet explorer ne le reconnais pas
ogg opus : l'opus c'est peut etre l'avenir de l'audio dans les navigateurs il est meilleur que le mp3, le temps de décodage est rapide il est efficace pour une large gamme de débits et il est libre.l'Internet Engineering Task Force (IETF) l'a reconnu comme futur standard d'Internet et il été retenu pour Web-RTC l'api permettant de faire de la visioconférence dans un navigateur, le conteneur est l'ogg mais pour éviter la confusion l'extension du fichier est opus (fichier.opus). Seul Internet explorer ne le reconnais pas et pour safari il faudra installer le codec dans l'os
webm vorbis : le conteneur est le webm et le codec le vorbis internet explorer ne le reconnais pas et pour safari il faudra installer le codec dans l'os
aac : reconnu par tous les navigateurs mais pour firefox il faudra installer le codec dans l'os
Compatibilité avec les balises objet et embed
pour la compatibilité avec les balises objet et embed il suffit tout simplement d'intégré ces balises au sein de la balise video ou audio
petit exemple
<video src="video.ogv" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
balises
il y a deux balise la balise vidéo et la balise source.
la balise vidéo : il s'agit de la balise principale qui comprend les attributs globaux et le chemin de la video.
la balise source : elle est mise a l'intérieur de la balise vidéo elle sert a indiquer le chemin du média et le type (type-mime) du média l' avantage d'utiliser la balise c'est de pouvoir intégrer plusieurs médias de format différent afin de garantir qu'une vidéo sera lu par tous les navigateurs.
type-mime video et audio
| fichier | extention | type-mime |
|---|---|---|
| Audio mp3 | mp3 | audio/mpeg |
| Audio mp4 | mp4 m4a | audio/mp4 |
| Audio ogg | oga ogg | audio/ogg |
| Audio opus | opus | audio/ogg |
| Audio WebM | webm | audio/webm |
| Audio aac | aac | audio/aac |
| Video mp4 | mp4 m4v | video/mp4 |
| Video webm | webm | video/webm |
| Video ogg | ogv ogg | video/ogg |
note : il y a donc deux méthodes pour indiquer le chemin d'un média soit on le met dans la balise vidéo ou audio mais il n'y aura qu'un unique format possible.
<video src="http://blabla/video.webm" controls>
</video>
soit on utilise les balise source et a ce moment on peut déclaré plusieurs média de format différent le navigateur lira le codec qu'il reconnait et si le navigateur sait lire plusieurs codecs il prendra en compte la première balise source dont il reconnait le format.
<video controls>
<source src="http://blabla/video.webm" type="video/webm">
<source src="http://blabla/video.mp4" type="video/mp4">
</video>
attributs de balise
il s'agit des attributs que l'on met a l'intérieur de la balise video ou audio.
src : correspond au chemin ou se situe le media.
poster : affiche un image en poster au chargement de la page.
preload : pour précharger en arrière plan le media. il y a trois valeurs
-none : pas de préchargement.
-auto : préchargement.
-metadata : seul les métadonnées son chargé (nom du fichier, duree).
par défaut le media est mise en cache au moment ou on clic sur play.
autoplay : false ou true, le media démarre automatiquement aux chargement de la page (par défaut le media est en pause).
loop : false ou true, pour faire tourner le media en boucle.
controls : false ou true, affiche ou cache la barre de contrôle du lecture (play, pause, barre de défilement, volume.).
width : correspond a la largeur de la zone du media en pixel.
height : correspond a la hauteur de la zone du media en pixel.
pour les valeurs height et width le media gardera toujour son ratio plus précisément si une vidéo a une taille de 400x300 et que l'on met height 400 et width a 500 la vidéo restera en 400x300 et pas 400x500.
méthodes
il s'agit des méthodes qui soit donne des informations tel la durée du media ou bien encore si le media est en pause..etc, soit servent a modifier l'état du media comme la mettre en pause ,avancer ...etc certains attributs font les deux ils informent et sont modifiables.
paused : (true ou false, lecture) informe si le media défile ou est arrête.
pause() : arrête la lecture.
play() : joue la lecture
load() : permet soit le rechargement du média en cour soit le chargement d'un nouveau media sans avoir a recharger la page.
duration : (valeur, lecture) donne la durée en seconde.
currentSrc : (lecture) indique le chemin absolu du media en cour.
autoplay : (true ou false, modification et lecture) informe si le media est en mode autoplay.
startTime : (valeur, lecture) indique a quelle moment le media a démarré.
currentTime : (valeur, lecture et modification) informe de la durée écoule en seconde ou modifie la position de la lecture.
loop : (true ou false, lecture et modification) spécifie si le media doit tourner en boucle.
muted : (true ou false, lecture et modification) coupe ou remet le son et informe sur l'etat du son.
volume : (valeur, lecture et modification)valeur de 0 a 10 du volume modifiable.
controls : (true ou false, lecture et modification) affiche ou cache les contrôle du player et informe de son état.
canPlayType(type) : le type de média que peut lire le navigateur.
buffered : niveau du chargement du média en milliseconde
defaultPlaybackRate : (valeur, lecture) donne La vitesse de lecture de la vidéo.
playbackRate : (valeur, lecture et modification) donne ou modifie la vitesse de lecture du media en cours: 1.0 la lecture est normale, 2,0 elle va deux fois plus vite en avant, -2.0 elle va deux fois plus vite mais en marche arrière.
ended : (true ou false, lecture) retourne true si la lecture du media est termine.
seekable : (true ou false, lecture)
readyState : (etat de 0 a 4) informe de l'etat de chargement du media il y a 5 etat.
| etat | Description |
| 0 | Aucune information concernant le media est disponible |
| 1 | Assez de ressource on été recu afin de connaitre la durée du media et ses dimensions, il s'agit des métadonnées qui se trouvent en début de fichier. |
| 2 | les Données de la position actuelle de la lecture sont disponible, mais il n'y a pas assez de données disponibles pour pouvoir démarrer la lecture du media. |
| 3 | asser de donnes sont disponible pour pouvoir démarrer la lecture et pouvoir un peut avancer le media sans pour autant retourner a l'etat 1. |
| 4 | il y a suffisamment de données disponibles pour lire la vidéo en entier. |
networkState : (etat de 0 a 3) il s'agit de l'état du réseau.
| etat | Description |
| 0 | L'élément n'a pas encore été initialisée. Tous les attributs sont dans leur état initial. |
| 1 | L'élément de l'algorithme de sélection des ressources est actif et a sélectionné une ressource, mais elle n'est pas réellement utilisable dans le réseau à ce moment. |
| 2 | L'agent utilisateur tente activement de télécharger des données. |
| 3 | L'algorithme de sélection des ressources est active, mais il n'a pas réussi à trouver une ressource à utiliser. |
error : (etat de 1 a 4) il s'agit des erreurs.
| etat | Description |
| 0 | Le processus de récupération du media a été annulée à la demande de l'utilisateur. |
| 1 | Une erreur de réseau est survenue le flux n'a pas pu etre charge |
| 2 | Une erreur s'est produite, la description de certains élément du media pendant le décodage a échoue, on peut considéré que le media est endommage ou que le codec cause problème. |
| 3 | l'attribut src du media n'est pas valide.plus précisément l'adresse du media n'existe pas. |
les evenements
ces evenement se comporte comme les évènement habituelles javascript (onclick, onchange...etc) a mettre a l'intérieur de la balise video ou audio.
exemple
dans cette exemple une alert est envoyer a la fin de la lecture du media
<video src="http://blabla/video.ogg" controls onended="alert('fin du media')">
</video>
onabort : Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.
oncanplay : Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur CAN_PLAY de readyState.
oncanplaythrough : Envoyé lorsque l'état devient CAN_PLAY_THROUGH, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.
oncanshowcurrentframe : L'image courante est chargée et peut être présentée. Ceci correspond à la valeur CAN_SHOW_CURRENT_FRAME de readyState.
ondataunavailable : Envoyé lorsque l'état devient DATA_UNAVAILABLE.
ondurationchange : Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.
onemptied : Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
onempty : Envoyé lorsqu'une erreur survient et que le média est vide.
onended : Envoyé lorsque la lecture se termine.
onerror Envoyé lorsqu'une erreur se produit. L'attribut error de l'élément contient plus d'informations.
onloadedfirstframe : La première image du média a été chargée.
onloadedmetadata : Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
onloadstart : Envoyé lorsque le chargement du média débute.
onpause : quand on interromp la lecture par pause.
ponlay : quand on demarre ou reprend la lecture.
onprogress : Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :
lengthComputable
vaut true si la taille totale du média est connue, false sinon.
loaded
Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.
total
Le nombre total d'octets dans le fichier de média.
onratechange : Envoyé lorsque la vitesse de lecture change.
onseeked : Envoyé lorsqu'une opération de positionnement est effectuée.
onseeking : Envoyé lorsqu'une opération de positionnement débute.
onsuspend : Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.
ontimeupdate : Le temps indiqué par l'attribut currentTime de l'élément a été modifié.
onvolumechange : quand le volume est modifié ou que l'on ai mis le volume sur muted.
onwaiting : tant que le cache n'est pas asser important pour lancer la lecture.
construction d'un lecteur
le lecteur
il s'agit d'un lecteur video le principe est exactememnt le meme pour un lecteur audio il comporte la barre permettant de suivre le lecture de modifier la position de la lecture et de visualiser le chargement de la video. On retrouve un bouton play pause un bouton stop un bouton mute afin de couper le son l'affichage de la durée ecoulé en enfin une barre permettant de modifier le niveau sonore.
pour tester c'est ici http://scriptevol.toile-libre.org/scriptsite/pratique_poo/player.html
la balise
nous allons commencer par la partie balise qui sera constitué de la balise video accompagne de deux balises sources afin d'utiliser les format mp4 et webm il y a aussi les evenements onprogress qui servira a appeler la fonction qui affichera la progression du chargement du média onclick qui appelera un fonction qui mettera en pause ou redemarera le média au clic sur la video et onended qui sera appelé a la fin de la video afin de stopper le player .
<div> <video id="v1" autobuffer onprogress="progression(event)" onclick="marchearret()" onended="stop()" style='cursor:pointer;' > <source src='http://videos.mozilla.org/serv/marketing/communityvideos/community_vreddy.ogv' type="video/ogg"> <source src='http://d31j8lt3uybmqs.cloudfront.net/sublimevideo/dartmoor.mp4' type="video/mp4"> </video> </div>
les boutons
il y a un bouton play pause, un bouton stop et un bouton mute auquels on associes un evenement onclick afin d'executer ce a quoi ils servent
ce qui donne pour la partie html
<input type='button' value='play' onclick='marchearret(this)' id='ma'/> <input type='button' value='stop' onclick='stop()'/> <input type='button' value='mute' onclick='mute(this)'/>
le css
input{
width:60px;
height:25px;
margin:auto;
color:white;
border:solid;
border-width:1px;
border-color:white;
border-radius:8px;
background-color:#56555A;
}
la fonction marchearret utilise une condition qui teste si le media est en pause si c'est le cas elle met le media en lecture ( play() ) et inversément si le media est en lecture elle sera mise en pause ( pause() ) et on modifier la valeur du bouton. Il y a aussi le lancement et l'arret d'un timer (setInterval) qui lancera ou arretera la fonction qui permet de positionner le curseur de lecture que l'on vera plus bas
function marchearret(){
var elem=document.getElementById('v1');
var lui=document.getElementById('ma');
if(elem.paused==true){
elem.play();
lui.value="pause";
inter_video=setInterval(posivi,100);
}
else{
elem.pause();
lui.value="play";
clearInterval(inter_video);
}
}
pour le bouton stop on met dabord le media en pause, on positionne le media au début ( currentTime=0) puis on modifier la valeur du bouton play pause. On a aussi l'arret du timer de suivie video, Quand a la derniere ligne elle sert a position le curseur de lecture au debut, curseur que l'on verra plus bas.
function stop(){
clearInterval(inter_video);
document.getElementById('v1').pause();
document.getElementById('v1').currentTime=0;
document.getElementById('ma').value="play";
document.getElementById("bar").style.marginLeft=0+"px";
}
la fonction mute coupera le son ou le remettera elle sera donc accompagne d'un condition afin de tester si le son est mis ou coupé
function mute(){
var elem=document.getElementById('v1');
elem.muted==true ? elem.muted=false : elem.muted=true;
}
voila pour les boutons maintenant nous allons rajouter au coté des boutons la durée écouler
affichage du temp
le html
<span id="temp">00:00:00</span>
on recupere la duree ecoulé avec currentTime et vue que la valeur correspond a la durée coulé en seconde pour avoir une valeur en minute seconde on divise le tout par soixante afin d'obtenir le nombre de minute et pour les secondes on recupere le reste de la division et enfin on formate le texte que l'on affichage dans le span
function tmp(){
var dura=document.getElementById('v1').currentTime;
var min = Math.floor(dura / 60);
if (min < 10) {
min = '0' + min;
}
var sec = Math.floor(dura % 60);
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('temp').firstChild.nodeValue='00:'+min+ ':'+sec;
}
reglage du son
la partie html est contitué d'un div rectangulaire dans lequel on clic pour regler le son si on clic au début du div le son est baissé et si on clic a la fin le son est a son maximum. a l'interieur du div se trouve un autre div qui permetra de visualisé le niveau du son en modifiant sa largeur
<div onclick='monte_le_son(event)' class='mt_le_son'> <div class='cur_son'></div> </div>
le css
.mt_le_son{height:14px;
border-radius:7px;
width:60px;border-style:solid;
border-width:1px;
border-color:white;
background:white;
float:right;
margin-right:20px;
cursor:pointer
}
.cur_son{
height:14px;
border-radius:5px;
width:100%;
background:#6A665B;
}
le js consiste a recuperer la position de la souris que l'on soustrait de la position de la barre ce qui donne la distance entre le bord de la barre et le pointeur de la souris,ensuite on recupere la taille de la barre puis on divise la premiere valeur par la seconde ce qui donne une valeur comprise entre 0 et 1 valeur qui correspond au niveau de son a appliqué en utilisant la méthode volume puis on modifie la taille du div se trouvant a l'interieur de la barre en multipliant la taille de la barre par la valeur récupéré precedement afin de visualisé le niveau sonore.
function monte_le_son(e){
var elem=e.currentTarget;
var setX =e.clientX;
var taille=elem.offsetWidth
var position=elem.offsetLeft
var position=setX-position
var distance=position/taille
document.getElementById('v1').volume=distance.toFixed(1);
elem.getElementsByTagName('div')[0].style.width=distance.toFixed(1)*taille+'px'
}
la barre de progression
nous commancons par la partie html qui sera constitué d'un div conteneur et qui represente la barre de progression a l'interieur on ajoute un div qui representera le prechargement du media et un div representant le curseur de progression.
<div id='defile' onmousedown="ajoutevent(event)"> <div id='precharge'></div> <div id='bar'></div> </div>
le css
#defile{
background-color:white;
width:300px;
margin-left:20px;
border-radius:7px
}
#precharge{
background-color:#6A665B;
width:30px;
height:14px;
border-radius:7px
}
#bar{
background-color:#222222;
width:14px;
height:14px;
margin-top:-14px;
border-radius:7px;
}
le prechargement
dans la balise on trouve l'evenement onprogress qui est actif durant toute la durée du chargement et qui de facon periodique appelera la fonction auquel on l'aura associé.
dans la fonction on utilise la méthode buffered qui retourne la durée prechargé il suffit alors de divisé cette valeur par la durée total de la video afin d'obtenir une valeur variant de 0 a 1 puis on multiplie cette valeur par la largeur de la barre ce qui donne la largeur du div representant le chargement que l'on applique.
function precharge(evt){
var elem=evt.currentTarget;
var charge=elem.buffered.end(0);
var valeur=(charge/elem.duration).toFixed(2); //retourne une valeur compris entre 0 et 1
document.getElementById('precharge').style.width=(valeur*document.getElementById("defile").offsetWidth)+'px';
}
la progression du curseur
pour afficher la position du curseur en fonction de la position du media on divise le temp écoulé par la duree du media ce qui donne une valeur comprise entre 0 et 1 correspondant a l'ecoulement du media ensuite on recupere la taille de la barre de scroll moins la taille du curseur qui donne la distance reel de la barre de progression et pour connaitre la position du curseur dans la barre de progression i
l suffit de multiplier la valeur comprise entre 0 et 1 par la distance reel de la barre de progression. La fonction est appelé par un timer qui est lancé au moment ou l'on appui sur le bouton play pause du lecteur.
function posivi(){
var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6); //retourne une valeur compris entre 0 et 1
var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //la distance total a parcourir de la barre
document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
tmp()
}
modifier la position de la lecture
pour modifier la position de lecture il suffit de faire un mousedown dans la barre de progression puis on deplace la souris en horizontal pour ce faire on doit avant tout ajouter un evenement mousemove qui appele la fonction gerant le deplacement et au mouseup on devra retirer l'evenement mousemove. On éxecute aussi preventDefault() afin d'eviter la selection de texte au deplacement de la souris.
function ajoutevent(e){
e.preventDefault() //evite la selection d'element dans le document
document.documentElement.addEventListener("mousemove", curent, false)
document.documentElement.addEventListener("mouseup", retireevent, false)
curent(e)
}
function retireevent(){
document.documentElement.removeEventListener("mousemove", curent, false)
document.documentElement.removeEventListener("mouseup", retireevent, false)
}
dans la fonction qui positionne le media on recupere en premier lieux la position de la souris et on soustrait cette position avec celle de la barre de progression moins la moitié de la taille du curseur ce qui donne la distance entre le bord gauche de la barre et la souris en prenant en considération que le curseur se trouvera au centre de la souris. ensuite on recuper la taille de la barre moins la taille du curseur afin d'avoir la distance reel. Ensuite on divise la premiere valeur par la deuxieme valeur afin d'obtenir une valeur comprise entre 0 et 1, valeur que l'on multiplie par la durée du media ce qui donne la position que doit avoir le media ( currentTime ); En dernier on a une condition qui teste si le player est en pause si c'est le cas on positionne le curseur a la bonne position dans le cas contraire c'est la fonction posivi() qui le positionne.
function curent(e){
var setX =e.clientX;
var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //distance reel de la barre de defilement
var valeur=(setX-document.getElementById("defile").offsetLeft-document.getElementById("bar").offsetWidth/2); //position du curseur de la sourie dans la barre de defilement
valeur=valeur/distance; //valeur comprise entre 0 et 1
document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video
if(document.getElementById('v1').paused==true){
document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
}
}
le script complet
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Video element</title>
<style type="text/css">
body {
background-color:gray;
}
input{
width:60px;
height:25px;
margin:auto;
color:white;
border:solid;
border-width:1px;
border-color:white;
border-radius:8px;
background-color:#56555A;
}
#defile{
background-color:white;
width:300px;
margin-left:20px;
border-radius:7px
}
#precharge{
background-color:#6A665B;
width:30px;
height:14px;
border-radius:7px
}
#bar{
background-color:#222222;
width:14px;
height:14px;
margin-top:-14px;
border-radius:7px;
}
.mt_le_son{height:14px;
border-radius:7px;
width:60px;border-style:solid;
border-width:1px;
border-color:white;
background:white;
float:right;
margin-right:20px;
cursor:pointer
}
.cur_son{
height:14px;
border-radius:5px;
width:100%;
background:#6A665B;
}
</style>
<script>
var inter_video
function ajoutevent(e){
e.preventDefault() //evite la selection d'element dans le document
document.documentElement.addEventListener("mousemove", curent, false)
document.documentElement.addEventListener("mouseup", retireevent, false)
curent(e)
}
function retireevent(){
document.documentElement.removeEventListener("mousemove", curent, false)
document.documentElement.removeEventListener("mouseup", retireevent, false)
}
function curent(e){
var setX =e.clientX;
var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //distance reel de la barre de defilement
var valeur=(setX-document.getElementById("defile").offsetLeft-document.getElementById("bar").offsetWidth/2); //position du curseur de la sourie dans la barre de defilement
valeur=valeur/distance; //valeur comprise entre 0 et 1
document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video
if(document.getElementById('v1').paused==true){
document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
}
}
function posivi(){
var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6); //retourne une valeur compris entre 0 et 1
var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //la distance total a parcourir de la barre
document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
tmp();
}
function tmp(){
var dura=document.getElementById('v1').currentTime;
var min = Math.floor(dura / 60);
if (min < 10) {
min = '0' + min;
}
var sec = Math.floor(dura % 60);
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('temp').firstChild.nodeValue='00:'+min+ ':'+sec;
}
function precharge(evt){
var elem=evt.currentTarget;
if(evt.lengthComputable && evt.total) {
var valeur=(evt.loaded/evt.total); //retourne une valeur compris entre 0 et 1
}
else if(elem.buffered && elem.buffered.length>0){
var charge=elem.buffered.end(0);
var valeur=(charge/elem.duration).toFixed(2); //retourne une valeur compris entre 0 et 1
}
document.getElementById('precharge').style.width=(valeur*document.getElementById("defile").offsetWidth)+'px';
}
function marchearret(){
var elem=document.getElementById('v1');
var lui=document.getElementById('ma');
if(elem.paused==true){
elem.play();
lui.value="pause";
inter_video=setInterval(posivi,100);
}
else{
elem.pause();
lui.value="play";
clearInterval(inter_video);
}
}
function mute(){
var elem=document.getElementById('v1');
elem.muted==true ? elem.muted=false : elem.muted=true;
}
function stop(){
clearInterval(inter_video);
document.getElementById('v1').pause();
document.getElementById('v1').currentTime=0;
document.getElementById("bar").style.marginLeft=0+"px";
document.getElementById('ma').value="play";
}
function monte_le_son(e){
var elem=e.currentTarget;
var setX =e.clientX;
var taille=elem.offsetWidth
var position=elem.offsetLeft
var position=setX-position
var distance=position/taille
document.getElementById('v1').volume=distance.toFixed(1);
elem.getElementsByTagName('div')[0].style.width=distance.toFixed(1)*taille+'px'
}
</script>
</head>
<body>
<div>
<video id="v1"
onprogress="precharge(event)"
onclick="marchearret()"
onended="stop()"
style='cursor:pointer;display:block;margin:auto;height:300px'
>
<source src='http://d31j8lt3uybmqs.cloudfront.net/sublimevideo/dartmoor.mp4' type="video/mp4">
<source src='http://videos.mozilla.org/serv/marketing/communityvideos/community_vreddy.ogv' type="video/ogg">
</video>
</div>
<br>
<div style='margin:auto;width:350px;background:#38383A;margin:auto;padding:10px'>
<div id='defile' onmousedown="ajoutevent(event)">
<div id='precharge'></div>
<div id='bar'></div>
</div>
<br>
<div style='margin:auto'>
<input type='button' value='play' onclick='marchearret(this)' id='ma'/>
<input type='button' value='stop' onclick='stop()'/>
<input type='button' value='mute' onclick='mute(this)'/>
<div onclick='monte_le_son(event)' class='mt_le_son'>
<div class='cur_son'></div>
</div>
<span id="temp">00:00:00</span>
</div>
</div>
</body>
</html>
conclusion
voila comment on fait un player je n'ai pas cherché a faire un player optimisé car je me suis focalisé sur la comprehension des mecanisme je vous laisse donc le soins de l'optimisation et de l'amélioration.