Admin/Dev

Pour une application HTML, il peut être intéressant de pré-charger une vidéo afin qu'elle puisse se lancer au moment où l'on souhaite, sans avoir à attendre qu'elle se charge depuis le serveur web.

Pour cela, il existe des mécaniques pour charger une vidéo, mais il y a des limitations. Il faut donc un peu tricher pour arriver à ses fins.

Voici ma solution pour arriver à charger une vidéo sans forcément la lire, avec du Javascript.

Commençons par créer un objet vidéo

maVideo = document.createElement('video');

indiquons lui le chemin vers la vidéo sur le serveur

maVideo.src = 'chemin/vers/ma/video.mp4';

ensuite, ajoutons le paramètre autoplay

maVideo.autoplay = true;

Même si votre vidéo de ne doit pas être lue dès son chargement, il est nécessaire d'ajouter ce paramètre. En effet, en l'indiquant, le navigateur va immédiatement démarrer le chargement de la vidéo, car elle doit être lue dès que possible.

Enfin, il faut placer la vidéo dans un espace de la page HTML, que l'on nommera pour l'exemple monEspaceVideo

document.getElementById('monEspaceVideo').appendChild(maVideo);

A partir de là, votre vidéo va se charger automatiquement. A vous de la cacher si nécessaire, ou d'en faire ce que vous voulez.

Dans le cadre d'une application, il peut être intéressant de savoir quand la vidéo est entièrement chargée et donc disponible pour une lecture. De plus, si l'on ne souhaite pas que la lecture soit automatique, alors il faut intervenir.

Pour cela on va ajouter un événement qui faire cela pour nous, qui ressemblerait à cela

maVideo.addEventListener("canplaythrough", function() {

}, false);

Commençons par mettre en pause la vidéo

maVideo.addEventListener("canplaythrough", function() {
    maVideo.pause();
}, false);

puis vous pouvez envoyer l'information à votre application, avec une fonction que vous prévoirez. Ici, pour l'exemple nous allons définir une application nommée monApp, et une fonction videoLoadComplete.

maVideo.addEventListener("canplaythrough", function() {
    maVideo.pause();
    monApp.videoLoadComplete();
}, false);

A ce moment, on pourrait croire que l'on a fini. Techniquement, c'est bien le cas. Cependant, certains navigateurs ont tendance à déclencher plusieurs fois l'événement, ce qui peut perturber l'application. Nous allons donc ajouter une petite subtilité qui consiste à retirer l'événement après le premier déclenchement.

Pour cela, faites bien attention, il faut transformer la fonction anonyme que l'on donne à l'événement, en fonction nommée pour pouvoir la récupérer plus tard.

maVideo.addEventListener("canplaythrough", function onVideoPreload() {
    maVideo.pause();
    monApp.videoLoadComplete();
    maVideo.removeEventListener("canplaythrough", onVideoPreload);
}, false);

Et voilà, le tour est joué !

Voici le script dans son intégralité

maVideo = document.createElement('video');
maVideo.src = 'chemin/vers/ma/video.mp4';
maVideo.autoplay = true;
document.getElementById('monEspaceVideo').appendChild(maVideo);
maVideo.addEventListener("canplaythrough", function onVideoPreload() {
    maVideo.pause();
    monApp.videoLoadComplete();
    maVideo.removeEventListener("canplaythrough", onVideoPreload);
}, false);