HTML5 video buffer

<script>
		jQuery(document).ready(function($){
      var video_length_round = 30;

      var video = document.getElementById('bgvid');
      var mp4Source = document.getElementById('mp4Source');

      // Ensure home_video_element present on page
      if(typeof video !== 'undefined'){

        // Ensure video element has an mp4Source, if so then update video src
        if(typeof mp4Source !== 'undefined'){
          $(mp4Source).attr('src', '/wp-content/themes/g5_engrnt/assets/media/energievoordeelgarant_converted.mp4');
        }
         if(typeof webMSource !== 'undefined'){
          $(webMSource).attr('src', '/wp-content/themes/g5_engrnt/assets/media/energievoordeelgarant_converted.webm');
        }

        video.load();

        // Ensure video is fully buffered before playing
        video.addEventListener("canplay", function() {
          this.removeEventListener("canplay", arguments.callee, false);

          if(Math.round(video.buffered.end(0)) >= video_length_round){
            // Video is already loaded
            this.play();

          } else {
            // Monitor video buffer progress before playing
            video.addEventListener("progress", function() {
              if(Math.round(video.buffered.end(0)) == video_length_round){
                this.removeEventListener("progress", arguments.callee, false);
                video.play();
              }
            }, false);
          }
        }, false);
      }
    });
		</script>

<video id="bgvid" loop="" poster="" preload="auto">
 <source id="mp4Source" type="video/mp4">
 <source id="webMSource" type="video/webm">
 </video>

#html5 #jQuery #video