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:

Code 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>

Code 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);

Code 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']();
});

8.8.14 - 0

Feature Detection HTML5

Vous voulez savoir si le navigateur reconnaît les nouveautés HTML5, Allons-y. D'abord, je vous recommandons d'utiliser une bibliothèque appelée modernizr pour effectuer des tests de fonctionnalité, il est certainement important d'avoir une idée de ce qui se passe derrière la scène.

Feature Detection HTML5

Input Type:

Quand nous essayons d'appliquer un type input que le navigateur ne le support pas, il sera toujours afficher l'input de type "texte". Pour tester si le navigateur prend en charge un type quelconque:

var input = document.createElement ('input');
input.setAttribute ('type', 'color');
if (input.type == 'color') {
  //Navigateur prend en charge ce type
}

Attributs:

Pour déterminer si un navigateur prend en charge un attribut:

if ('placeholder' in document.createElement('input')) {
  //Navigateur prend en charge l'attribut placeholder
}

Ce code détermine simplement si un attribut existe dans l'objet document.createElement('input'). C'est exactement la même chose que :

var langues = {
  francais : 'premier',
  anglais  : 'deuxieme'
};

if ('francais' in langues ) { ... }

audio et vidéo:

Presque tous les navigateurs modernes supportent la balise audio et vidéo. Nous pouvons encore fournir le test pour les anciens navigateurs. Nous pouvons tester des médias par la méthode "canPlayType":

if (document.createElement('audio').canPlayType) {
  // Mettez votre code ici
}

ou bien:

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

canvas:

Si nous avons besoin de tester le support de canvas :

if (document.createElement('canvas').getContext) {
  //recupérer votre canvas
}

Local storage:

Tester le support de LocalStorage est simple. Nous pouvons générer des erreurs utilisons le block try{...}catch{...}:

try {
  if ('localStorage' in window.localStorage != null)
    return true; 
} catch (e) {
    return false;
}

Ce code détermine si localStorage exists dans l'objet window. Si des erreurs se produisent dans le processus, il retourne false.

Autres API:

Le test pour les autres nouvelles API est plus ou moins le même processus.

Geolocation:

if ( navigator.geolocation )

Offline

if ( window.applicationCache )

Web Workers

if ( window.Worker )

History

if ( window.history )
//ou bien
if ( window.history && history.pushState )

24.5.14 - 0