HTML5 Game - Preloading Video in JavaScript

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Description

Preloading Video in JavaScript

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {/*  w  w  w  . jav  a 2 s .c o m*/
  let videoElement = document.getElementById("thevideo");
  
  videoElement.addEventListener('progress',updateLoadingStatus,false);
  videoElement.addEventListener('canplaythrough',playVideo,false);
    //playVideo(); // add back for browsers that no longer fire events for embedded <video>
      
}

function updateLoadingStatus() {

  let loadingStatus = document.getElementById("loadingStatus");
  let videoElement = document.getElementById("thevideo");
  let percentLoaded = parseInt(((videoElement.buffered.end(0) /videoElement.duration) * 100));
    document.getElementById("loadingStatus").innerHTML =   percentLoaded + '%';

}



function playVideo() {
  let videoElement = document.getElementById("thevideo");
  videoElement.play();

}
</script>

</head>
<body>
<div>
<video loop controls id="thevideo" width="320" height="240" >
 
 <source src="http://java2s.com/style/demo/your.webm" type='video/webm; codecs="vp8, vorbis"' >
 <source src="http://java2s.com/style/demo/your.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
 <source src="http://java2s.com/style/demo/your.ogg" type='video/ogg; codecs="theora, vorbis"'>
 
</video>

</div>

<div id="loadingStatus">
0%
</div>


</body>
</html>

Related Topic