Skip to content

Instantly share code, notes, and snippets.

@ddprrt
Created November 11, 2016 10:22
Show Gist options
  • Save ddprrt/ff6240461accaad580e16fb32bd0aa08 to your computer and use it in GitHub Desktop.
Save ddprrt/ff6240461accaad580e16fb32bd0aa08 to your computer and use it in GitHub Desktop.
Demo for today
<video controls poster="http://www.placecage.com/1600/900" preload="auto" src="http://media.w3.org/2010/05/sintel/trailer.mp4" ></video>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<span id="current">0</span> / <span id="total">I don't know</span>
<progress min="0" max="1" value="0"></progress>
var vid = document.querySelector('video')
var play = document.querySelector('#play');
var pause = document.querySelector('#pause');
var stop = document.querySelector('#stop');
var current = document.querySelector('#current');
var total = document.querySelector('#total');
var progress = document.querySelector('progress');
play.addEventListener('click', function() {
vid.play();
});
pause.addEventListener('click', function() {
vid.pause();
});
stop.addEventListener('click', function() {
vid.pause();
vid.currentTime = 0;
});
vid.addEventListener('timeupdate', function() {
current.innerText = parseInt(vid.currentTime);
progress.value = vid.currentTime / vid.duration;
});
vid.addEventListener('canplaythrough', function() {
total.innerText = vid.duration;
})
video {
width: 100%;
background: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment