Chapitrer une vidéo en HTML5

10 février 2015 HTML5, VIDEO
HTML5 Vidéo

Il est désormais possible de caler une vidéo à l'aide du Javascript et du HTML. Dans l'exemple ci dessous la vidéo est encodée dans les 2 formats (MP4 et WEBM).

• Caler la video 1 s, 1 mn , 2 mn, 6 mn ou 8 mn | Play/Pause

voici le code :

<script>
var tag = document.getElementById("tag");
    var log = document.getElementById("log");
    var update = false;
    tag.addEventListener('seeking',eventSeeking);
    tag.addEventListener('seeked',eventSeeked);
    tag.addEventListener('timeupdate',eventTime);
    
    function skip(value) {
        var video = document.getElementById("tag");
        video.currentTime += value;
    }      
    function appendLog(text) {
        var inner = log.innerHTML;
        log.innerHTML = inner + text + "<br/>";
    };
    function clearLog() {
        log.innerHTML = '';
    };
    
    function getSeeking() {
        appendLog("Seeking value: "+tag.seeking);
    };
    function getTime() {
        appendLog("currentTime value: "+tag.currentTime);
    };
    function doSeek(time) {
        tag.currentTime = time;
    };
    function eventSeeking() {
        appendLog("Seeking event fired (seeking="+tag.seeking+", currentTime="+tag.currentTime+")");
    };
    function eventSeeked() {
        appendLog("Seeked event fired (seeking="+tag.seeking+", currentTime="+tag.currentTime+")");
    };
    function eventTime() {
        if(update) {
            appendLog("Timeupdate fired (currentTime="+tag.currentTime+")");
        }
    };
    function timeUpdate(state) {
        update = state;
    };
 function vidplay() {
       var video = document.getElementById("tag");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }
    function restart() {
        var video = document.getElementById("tag");
        video.currentTime = 0;
    }

 </script>

pour le panneau de contrôle :

<li>Caler la video <a href="javascript:doSeek(1)">1 s</a>, <a href="javascript:doSeek(60)">1 mn </a>,
<a href="javascript:doSeek(120)">2 mn</a>, <a href="javascript:doSeek(360)">6 mn</a> ou
<a href="javascript:doSeek(480)">8 mn</a> | <a href="javascript:vidplay()">Play/Pause</a></li>