video_playback.js

function init() {
  video = document.getElementById('video');
	video.volume = 0;
				
	var progressSpan = document.getElementById('progress-span');
				
	var progressSlider = document.getElementById('progress-slider');
	progressSlider.max =  video.duration;
	progressSlider.onchange = function() {
		video.currentTime = progressSlider.value;
	};
				
	video.addEventListener('timeupdate',function(){
		progressSlider.value = video.currentTime;
		
		progressSpan.innerHTML = video.currentTime.toFixed(2);
	},false);
				
	var playing = false;
	var playPauseButton = document.getElementById('play-pause-button');
	playPauseButton.onclick = function() {
		if(playing) {
			video.pause();
			playing = false;
			playPauseButton.value = 'play';
		}
		else {
			video.play();
			playing = true;
			playPauseButton.value = 'pause';
		}
	};
				
	var skipButton = document.getElementById('skip-button');
	skipButton.onclick = function() {
		video.currentTime = video.currentTime + 2;
	};
				
	var volumeSpan = document.getElementById('volume-span');
				
	var volumeSlider = document.getElementById('volume-slider');
	volumeSlider.onchange = function() {
  	video.volume = volumeSlider.value / 100;
					
		volumeSpan.innerHTML = video.volume.toFixed(2);
	};
}