Basic HTML5 Video - Need to add, seek etc

gistfile1.txt

function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {  
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {      
	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
	ele.className=ele.className.replace(reg,'');  // additional space here adds a gap after the class is removed
  }
}



window.onload = function() {

	// Video
	var video = document.getElementById("video");

	// Buttons
	var playButton = document.getElementById("play-pause");
	var muteButton = document.getElementById("mute");

	// Sliders
	var volumeBar = document.getElementById("volume-bar");


	function togglePlayClass() {
		if (hasClass(playButton, "video--play")) {

			removeClass(playButton, 'video--play');

			// Update the button text to 'Pause'
			playButton.innerHTML = '<span class="screen-reader-text">Play</span>';

		} else {

			addClass(playButton, 'video--play');
			
			// Update the button text to 'Play'
			playButton.innerHTML = '<span class="screen-reader-text">Pause</span>';

		}
	}
	function toggleMutedClass() {
		if (hasClass(muteButton, "video--mute")) {

			removeClass(muteButton, 'video--mute');

			// Update the button text to 'Pause'
			muteButton.innerHTML = '<span class="screen-reader-text">Mute</span>';

		} else {

			addClass(muteButton, 'video--mute');
			
			// Update the button text to 'Play'
			muteButton.innerHTML = '<span class="screen-reader-text">Unmute</span>';

		}
	}



	video.onended = function() {
		removeClass(playButton, 'video--play');
		playButton.innerHTML = '<span class="screen-reader-text">Play</span>';
	}

	video.muted=true;

	if (video.muted == true) {
		addClass(muteButton, 'video--mute');
		muteButton.innerHTML = '<span class="screen-reader-text">Unmute</span>';
	}

	// Event listener for the play/pause button
	playButton.addEventListener("click", function() {
	  if (video.paused == true) {
		// Play the video
		video.play();

		togglePlayClass();
		
	  } else {
		// Pause the video
		video.pause();

		togglePlayClass();

	  }
	});

	// Event listener for playing / pausing the video when you click in the video itself
	video.addEventListener("click", function() {
		if (video.paused == true) {
			video.play();
			togglePlayClass();
		} else {
			video.pause();
			togglePlayClass();
		}
	});

	// Event listener for the mute button
	muteButton.addEventListener("click", function() {
	  if (video.muted == false) {
		// Mute the video
		video.muted = true;

		toggleMutedClass();

	  } else {
		// Unmute the video
		video.muted = false;

		toggleMutedClass();

	  }
	});

	// Event listener for the volume bar
	volumeBar.addEventListener("change", function() {
	  // Update the video volume
	  video.volume = volumeBar.value;

	  if (video.volume == volumeBar < .1) {
		video.muted = true;
		addClass(muteButton, 'video--mute');
		muteButton.innerHTML = '<span class="screen-reader-text">Unmute</span>';

	  } else {
		video.muted = false;
		removeClass(muteButton, 'video--mute');
		muteButton.innerHTML = '<span class="screen-reader-text">Mute</span>';
	  }

	});

}



<video id="video" autoplay="1" poster="video/video.jpg">
    <source src="video/Wildlife.mp4" type="video/mp4" />
    <source src="video/Wildlife.webm" type="video/webm" />
    <source src="video/Wildlife.ogv" type="video/ogg" />
    <img src="video/video.jpg" alt="">
</video>
<div class="v--controls" id="video-controls">
    <button class="v--btn v--btn--play" type="button" id="play-pause"><span class="screen-reader-text">Play</span></button>
    <button class="v--btn v--btn--mute" type="button" id="mute"><span class="screen-reader-text">Mute</span></button>
    <div class="range">
    	<input class="v--range" type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    </div>
</div>