Accueil    Codes    Html5 - API video
 



Html5 - API video  Html5 - API video



Présentation



L'API associée à l'élément html <video> permet de gérer simplement la lecture de la vidéo en javascript.
Outre les fonctions classiques permetant de lire, mettre en pause ou contrôler le volume, il est possible de se positionner à n'importe quel moment de la vidéo en utilisant la propriété "currentTime" ou encore de modifier la vitesse de lecture de la vidéo avec la propriété "playbackRate".

L'un des intérêts de cette API est ainsi de permettre la création d'une barre de contrôles personnalisés en lieu et place de celle proposée par défaut par la balise <video> lorsque son attribut "controls" est présent.



Mise en place



Voici tout d'abord la présentation classique de la balise video :



<video width="380px" height="280px" controls="controls">
   <source src="exemples/video/bandeannoncebigbunny.webm" type="video/webm" />
   <source src="exemples/video/bandeannoncebigbunny.mp4" type="video/mp4" />
   <source src="exemples/video/bandeannoncebigbunny.ogv" type="video/ogg" />
   Votre navigateur ne supporte pas le tag <video>.
</video>




Nous allons mettre en place les contrôles manuels en désactivant tout d'abord l'attribut "controls" de la balise puis en implémentant des boutons standards comme lecture, pause et arrêt.

Mise en place des boutons lecture / pause / stop

<video id="videoExemple1">
   <source src="exemples/video/bandeannoncebigbunny.mp4" type="video/mp4" />
   <source src="exemples/video/bandeannoncebigbunny.ogv" type="video/ogg" />
   <source src="exemples/video/bandeannoncebigbunny.webm" type="video/webm" />
   Votre navigateur ne supporte pas le tag <video>.
</video>

<input type="button" value="Lecture" onclick="LectureVideo();" />
<input type="button" value="Pause" onclick="PauseVideo();" />
<input type="button" value="Arrêt" onclick="StopVideo();" />

<script type="text/javascript">
var CtrlVideo = document.getElementById("videoExemple1");
function LectureVideo(){
   CtrlVideo.play();
}
function PauseVideo(){
   CtrlVideo.pause();
}
function StopVideo(){
   CtrlVideo.currentTime = 0;
   CtrlVideo.pause();
}
</script>




Nous allons maintenant compléter ces contrôles avec la gestion du volume et voir des éléments plus avancés comme l'affichage de la durée par rapport au temps total (propriété currentTime) ainsi que les possibilités de lecture rapide de la vidéo (propriété playbackRate).

Pour gérer la sélection du volume et de l'avancement de la vidéo nous allons également employer des contrôles adaptés : le slider jquery.

Voici le rendu final :



Le code associé est le suivant :


<video id="videoExemple2" width="450px">
   <source src="exemples/video/bandeannoncesintel.webm" type="video/webm" />
   <source src="exemples/video/bandeannoncesintel.mp4" type="video/mp4" />
   <source src="exemples/video/bandeannoncesintel.ogv" type="video/ogg" />
   Votre navigateur ne supporte pas le tag <video>.
</video>

<div id="sliderVideo"></div>
<div style="height:20px; line-height:20px; padding-top:5px; vertical-align:center; border:dotted 1px black; width:450px;">
   <span style="cursor:pointer; height:18px; width:18px; display:inline-block;" onclick="LectureVideo();"></span>
   <span style="cursor:pointer; height:18px; width:18px; display:inline-block;" onclick="AccelererVideo();"></span>
   <span style="cursor:pointer; height:18px; width:18px; display:inline-block;" onclick="PauseVideo();"></span>
   <span style="cursor:pointer; height:18px; width:18px; display:inline-block;" onclick="StopVideo();"></span>
   <span style="height:18px; width:18px; display:inline-block; margin-left:20px; margin-right:6px;"></span>
   <div id="sliderVolume" style="display:inline-block; margin-bottom:6px;"></div>
   <label id="lblVideoDuration" style="font-family:verdana; font-size:12px; float:right; margin-right:6px; margin-top:-3px;"></label>
   <label id="lblCurrentTime" style="font-family:verdana; font-size:12px; float:right; margin-right:6px; margin-top:-3px;"></label>
</div>

<script type="text/javascript">
CtrlVideo = document.getElementById('videoExemple2');
CtrlVideo.volume = 0.5;
// On associe la fonction UpdateTime() à l'évènement ontimeupdate de la balise video
CtrlVideo.setAttribute('ontimeupdate', 'UpdateTime();');

// Controle du volume
$(function() {
   $('#sliderVolume').slider({
   value: 50,
   min: 0,
   max: 100,
   step: 1,
   slide: function( event, ui ) {
          ChangeVolume(ui)
      }
   });
});

// Controle de la piste video
CtrlVideo.addEventListener('loadedmetadata', function() {
   $('#sliderVideo').slider({
      value: 0,
      min:0,
      max: Math.floor(CtrlVideo.duration * 10),
      step: 1,
      slide: function( event, ui ) {
            if (event.originalEvent) {
            ChangeProgress(ui);
            }
         }
      });

   document.getElementById('lblVideoDuration').innerHTML = ' / ' + Math.floor(CtrlVideo.duration/60) + ' : ' + Math.floor(CtrlVideo.duration - 60 * Math.floor(CtrlVideo.duration/60));
});

function ChangeVolume(ui){
   CtrlVideo.volume = ui.value / 100;
}
function LectureVideo(){
   CtrlVideo.playbackRate = 1;
   CtrlVideo.play();
}
function PauseVideo(){
    CtrlVideo.pause();
}
function StopVideo(){
   CtrlVideo.currentTime = 0;
   CtrlVideo.pause();
}
function AccelererVideo(){
   CtrlVideo.playbackRate += 1;
}
function ChangeProgress(ui){
   CtrlVideo.currentTime = ui.value /10;
}
function UpdateTime() {
   $('#sliderVideo').slider('value', Math.floor(CtrlVideo.currentTime * 10));
   document.getElementById('lblCurrentTime').innerHTML = Math.floor(CtrlVideo.currentTime/60) + ' : ' + Math.floor(CtrlVideo.currentTime - 60 * Math.floor(CtrlVideo.currentTime/60));
}
</script>



TelechargementTélécharger l'exemple html5 video API