API Player VIMEO démystifié

26 mars 2015 VIDEO, LABO & TESTS
Vidéo VIMEO

 Player HTML  5 en provenance de VIMEO

Il est possible de récupérer la source vidéo externe grâce à l'API (version payante), il est possible de faire la même chose avec le player natif de VIMEO

• Caler la video 1s, 5s , 10s | Play/Pause

code de l'embed [ <video controls="" preload="none" poster="https://i.vimeocdn.com/video/539786911_640.jpg" id="tag" tabindex="0" height="360" width="640">     <source type="video/mp4" src="https://player.vimeo.com/external/142484091.hd.mp4?s=b3711e2707707b8b55d4bcb23e4f85278844ee7e&profile_id=113"></video> ]

code javascript [ <script type="text/javascript">
    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> ]

Dans cette rubrique

• API player Youtube démystifié
• Fonctions avancées du player Youtube
• API Player VIMEO démystifié
• Player natif & API de VIMEO
• Chapitrer une Vidéo VIMEO