onlyforbopi
9/24/2018 - 1:16 PM

JS.AudioVideo.VideoElementAPI.js

JS.AudioVideo.VideoElementAPI.js

script.js
content_copyfile_download
window.onload = init;

let vid;

function init() {
	console.log("Page loaded, DOM is ready!"); 
	
	vid = document.querySelector("#myPlayer");
	
	vid.ontimeupdate = displayTimeWhileVideoIsPlaying;
}

function playVideo() {
	vid.play();
}

function pauseVideo() {
	vid.pause();
}

function rewindVideo() {
	vid.currentTime = 0;
}

function displayTimeWhileVideoIsPlaying(evt) {
	console.log(vid.currentTime);
	if(vid.currentTime > 5)
		vid.pause();
	
}
js-audiovideo-videoelementapi-js.markdown
content_copyfile_download
  • Rendered
  • Source

JS.AudioVideo.VideoElementAPI.js

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
	<title>HTML5 video element JS API</title>
	  <meta charset="utf-8">
<body>
<video id="myPlayer" > 
	<!-- I have three versions of the video encoded with
	     different codecs.  The browser will automatically
	     choose the first one it knows it can play. --> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.webm 
					type=video/webm> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.ogg 
					type=video/ogg> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.mp4 
					type=video/mp4> 
</video> 
	<br>
	<button onclick="playVideo();">Play</button>
	<button onclick="pauseVideo();">Pause</button>
	<button onclick="rewindVideo();">Rewind</button>
</body>
</html>