LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Video.js Playground

Seek link 0:17

Clear log

    CSS
    body {
      background: #292A2B;
      color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      padding: 20px;
    }
    
    .video-js .vjs-time-control {
      display: block;
    }
    
    .video-js .vjs-remaining-time {
      display: none;
    }
    
    JS
    var videos = {
        toystory: [{
            src: '//www.html5videoplayer.net/videos/toystory.mp4',
            type: 'video/mp4'
        }],
        oceans: [{
            src: '//vjs.zencdn.net/v/oceans.mp4',
            type: 'video/mp4'
        }, {
            src: '//vjs.zencdn.net/v/oceans.webm',
            type: 'video/webm'
        }]
    };
    
    var log = function (msg) {
        $('#log').append('
  • ' + msg + '
  • '); }; var debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // init var admin = false; var player = videojs('player'); var hidden = false; var buttonClickHandler = function () { player.pause(); player.currentTime(20); return; if (hidden) { player.controlBar.playToggle.show(); player.controlBar.progressControl.show(); hidden = false; } else { player.controlBar.playToggle.hide(); player.controlBar.progressControl.hide(); hidden = true; } }; player.on('ready', function() { log('event:ready'); log(player.currentTime()); player.src(videos.oceans); player.poster('https://ocdn.eu/pulscms-transforms/1/LWPktkqTURBXy83YWFiMGVlYWI0ZjJjZmUxYjA3ZWQ1YWI1YTEyNDlkOC5qcGVnk5UDAB_NBdzNA02TBc0DIM0BwpUH2TIvcHVsc2Ntcy9NREFfLzcxZTE4ZjAwM2FhYTU4OTc1MjAyYWY1OTQ4ZmY2ZmMxLnBuZwDCAA'); $('#button').click(buttonClickHandler); // player.play(); // player.bigPlayButton.hide(); // $('.video-js .vjs-tech, .vjs-poster').css('pointer-events', 'none'); }); player.on('play', function(e) { log('event:play'); }); player.on('pause', function(e) { log('event:pause'); }); player.on('timeupdate', function(e) { log('event:timeupdate'); }); var seeked = debounce(function(e) { // console.log(e); console.log(player.paused()); player.pause(); // console.log(player.isStopped()); // player.trigger('play'); // player.trigger('pause'); log('event:seeked - ' + player.currentTime()); }, 100); player.on('seeked', seeked); $('#seek-link').click(function () { player.currentTime(17); log(videojs.formatTime(17)); return false; }); $('#clear-link').click(function () { $('#log').html(''); return false; }); // setInterval(function () { // log(player.currentTime()); // }, 10000);
    Term
    Wed, 12/27/2017 - 06:57

    Related Codes

    Pen ID
    Pen ID
    Pen ID
    Square Adv