Demo for today

demo-for-today.markdown

Demo for today

A Pen by Stefan Baumgartner on CodePen.

License.

index.html

<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>

script.js

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;
})

style.css

video {
  width: 100%;
  background: red;
}