Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
    <title>JavaScript Progress Monitor</title>
    <script type="text/javascript">
        function getPercentProg() {
            var myVideo = document.getElementsByTagName('video')[0];
            var endBuf = myVideo.buffered.end(0);
            var soFar = parseInt(((endBuf / myVideo.duration) * 100));
            document.getElementById("loadStatus").innerHTML =  soFar + '%';
        }
       function myAutoPlay() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.play();
       }
       function addMyListeners(){
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.addEventListener('progress', getPercentProg, false);
           myVideo.addEventListener('canplaythrough', myAutoPlay, false);
       }
    </script>
</head>
<body onload="addMyListeners()">
  
  <h1>Check progression of buffering before playing a movie. Useful withy slow connection (3G, etc.)</h1>
    <div>
        <video controls>
    <source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm type=video/webm> 
    <source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.ogg type=video/ogg> 
    <source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4 type=video/mp4> 
        </video>
        <p id="loadStatus">MOVIE LOADING...</p>
    </div>
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AuroreDechampspro
0viewers