Contrôler le lecteur vidéo HTML5 avec JavaScript

En plus des contrôles intégrés, nous pouvons également contrôler une vidéo avec la nouvelle API médias de HTML5.

Contrôler le lecteur vidéo HTML5 avec JavaScript

Detection:

Détecter si le navigateur support les balise <video> et <audio> est simple (Feature Detection HTML5).

Nous avons seulement besoin de déterminer si la méthode "canPlayType" est disponible.

Si le navigateur reconnaît la balise <video>, il a également reconnaît la balise <audio>. 

Tous les navigateurs qui reconnaissent une, sera également reconnaître l'autre.

if ( 'canPlayType' in document.createElement('video') ) {
  // Code
}

if ( 'canPlayType' in document.createElement('audio') ) {
  // Code
}

Ou bien:

var supportMedia = (function() {
  return ('canPlayType' in document.createElement('video'));
})();
if ( supportMedia ) { 
  // Code
}

Si vous utilisez Modernizr, vous pouvez écrit:

if ( Modernizr.video ) { ... }
if ( Modernizr.audio ) { ... }

Dans certains cas, il est aussi utile de déterminer si les navigateurs reconnaissent un codec particulier(mp4, webm, ogg, ...). Est-il possible?

Oui bien sûre. Modernizr fournit une solution élégante. Par exemple:

Modernizr.video  // navigateur prend en charge la balise video
Modernizr.video.webm // navigateur prend en charge le format WebM
Modernizr.video.h264 // navigateur prend en charge le format H.264

Les API HTML5 audio et vidéo sont identiques. Donc on pourra tester le support de l'audio avec:

Modernizr.audio.mp3
Modernizr.audio.ogg
Modernizr.audio.wav

Méthodes:

Les méthodes disponibles pour les médias que ce soit audio ou video sont:

• play() => commence ou continue la vidéo référencée.
• pause() => pause la vidéo.
• load() => récupérer une nouvelle ressource multimédia.
• canPlayType() => détermine si le navigateur supporte un codec particulier.

Ces méthodes peuvent être utilisées, comme ceci:

var video = document.getElementById('video');
video.play();
video.pause();
video.canPlayType('audio/ogg');

événements:

• play: Lorsque la vidéo est lancée.
• pause: Lorsque la vidéo est en pause.
• ended: Lorsque la vidéo est terminée.
• progress: Lorsque les médias ont été récupérées.
• canplay: Lorsque la vidéo a été entièrement chargées.

attributs:

• duration: La durée de la vidéo associée.
• currentTime: La position actuelle de la vidéo. Par exemple, lorsque la vidéo est en pause.
• autoplay: Une valeur booléenne indiquant si la vidéo a été fixé à autostart.
• poster: L'image d'affiche fourni.
• paused: Une valeur booléenne indiquant si la vidéo est actuellement pause.
• ended: Une valeur booléenne indiquant si la vidéo est terminée.

Prenons un exemple pratique:

HTML5:

<video id="video" width="500" height="500">
  <source src="video.mp4">
  <source src="video.webm">
  <source src="video.ogg">
</video>
<button id="button">Play</button>

JavaScript:

var video = document.getElementById("video"),
var button = document.getElementById("button");

// Lancer la vidéo lorsque le bouton est cliqué.
button.addEventListener('click', function() {
  video[video.paused ? 'play' : 'pause'](); 
}, false);

// Changer le text en Pause si la vidéo est lancée
video.addEventListener('play', function() {
  button.innerHTML = 'Pause';
}, false);

// Changer le text en Play si la vidéo en pause
video.addEventListener('pause', function() {
  button.innerHTML = 'Play';
}, false);

// Changer le text en Play si la vidéo est terminée
video.addEventListener('ended', function() {
  button.innerHTML = 'Play';
}, false);

JQuery:

var $video = $('#video'),
video = $video[0];

$video
.on('play', function() {
  $('#button').text('Pause');
})
.on('pause ended', function() {
  $('#button').text('Play');
});
$('#button').on('click', function() { 
  video[video.paused ? 'play' : 'pause']();
});