Comment créer un lecteur vidéo HTML simple en lecture automatique avec un contrôle pause et lecture.

Le but de cet article est de poser une base sur l’utilisation de l’élément <video>. Cette balise permet de diffuser des flux de manière ouverte et compatible avec les derniers navigateurs et les appareils mobiles. On peut s’affranchir ainsi de technologies fermées et réservées à un nombre limité de systèmes. La question de l’encodage vidéo n’est pas traité ici1.

Objectif

Une vidéo sera insérée dans une page, en lecture automatique. Un clic sur la vidéo la met en pause et affiche le bouton Pause qui permettra de relancer la lecture. Un second clic reprend la lecture. À la fin de la vidéo, elle est mise en pause avec le bouton Lecture affiché.

Voir l’exemple

Principe

Deux éléments sont superposés dans le flux : la vidéo puis le bouton. Ce dernier est masqué à la lecture. En Javascript, l’utilisation de l’événement clic va exploiter cet état pour créer une sorte d’interrupteur « Allumer/Éteindre » ou « Pause/Lecture ».

Le clic sur le bouton n’est possible que s’il est visible et pareillement, le clic sur la vidéo n’est possible que si aucun élément ne la recouvre.

Structure HTML

<div id="conteneur_video">
    <video  src="fichier_video.ogg" autoplay type="video/ogg" width="600" height="490" class="video" id="video">
        Message alternatif en cas d'incompatibilité
    </video>
    <span id="play_pause"></span>
</div>

L’élément conteneur_video contient l’élément video et l’élément play_pause, qui accueille le bouton Pause/Lecture, géré graphiquement en CSS.

Positionnement et habillage CSS

#conteneur_video { 
    position: relative;
}
 /* Le bouton de Pause/Lecture, recouvre la totalité de la vidéo 
 *  et masqué au chargement de la page via Javascript
 */
#play_pause {
    position: absolute;
    top: 0; left: 0;
    /* Le bouton  aux dimensions du lecteur */
    width: 600px; height: 490px;  
    background: transparent url(play_video.png) no-repeat 50% 50%;
}
/* Class ajoutée par Javascript lors du clic Pause */
#play_pause.pause { 
    background-image: url(pause_video.png);
}

Contrôle de lecture par Javascript

Utilisation de JQuery, à lier à la page pour que le code suivant soit interprété par le navigateur.

$(function() {

   // La vidéo étant lancée automatiquement, le bouton est masqué 
    $('#play_pause').hide();

    // Assignation de l'élément <video>
    la_video = $('#video').get(0);

    // Le clic Bouton lance la lecture...
    $('#play_pause').click(function() {
    // ...si le bouton est visible (donc vidéo en pause)
        if ($(this).is(':visible')) {
            $(this).fadeOut("normal", function() {
                // Au masquage du bouton, on enlève la class qui affiche l'image Pause
                $(this).removeClass('pause');
            });
           la_video.play();
        }
    });

    // Clic sur vidéo = Pause + affichage du bouton
        $('#video').click(function() {
            la_video.pause();
            // on ajoute la class qui affiche l'image Pause
            $('#play_pause').addClass('pause').fadeIn("slow");
        });

    // En fin de lecture, on affiche le bouton en image Lecture 
    // pour pouvoir relancer la lecture
    la_video.onended = function() {
        $('#play_pause').fadeIn("slow");
    }
});

En ligne

MDN : Utilisation d’audio et video en HTML5

Notes

1 : Pour connaître les formats vidéos supportés par les navigateurs (il existe une version française mais plus compliquée à lire)