onsa
12/19/2016 - 9:16 PM

Display loading percentages while a media file is streamed.

Display loading percentages while a media file is streamed.

loadingPercentage.html
content_copyfile_download
<!doctype html>
<html lang="en">
  <head>
	<title>JavaScript Progress Monitor</title>
	<script>
	  function getPercentProg() {
		  var myVideo = document.getElementsByTagName('video')[0];
		  var endBuf = myVideo.buffered.end(0);
		  var soFar = parseInt(((endBuf / myVideo.duration) * 100), 10);
		  document.getElementById("loadStatus").innerHTML = soFar + '%';
	  }
	  // Will be called as soon as the page is ready on desktop computer,
	  // Only when a user clicks on play control or image on mobile
	  function myAutoPlay() {
		  var myVideo = document.getElementsByTagName('video')[0];
		  myVideo.play();
	  }
	  function addMyListeners(){
		  var myVideo = document.getElementsByTagName('video')[0];
		  myVideo.addEventListener('progress', getPercentProg, false);
		  // Calls autoplay only if the device is adapted
		  myVideo.addEventListener('canplaythrough', myAutoPlay, false);
	  }
  </script>
</head>
<body onload="addMyListeners()">
	<h1>Check progression of buffering before playing a movie. Useful with
		slow connection (3G, etc.)</h1>
	<div>
	  <video controls>
		  <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>
	  <p id="loadStatus">Buffering...</p>
	</div>
</body>
</html>