videojs: play loop video without re-load

Question

I'm using videojs to play a background loop video.

But when it's on ended, it reloading the video about 0.2s

How to play a loop video without delay?

my fiddle: http://jsfiddle.net/wdaLq8pk/

<script src="http://vjs.zencdn.net/4.11/video.js"></script>
<link href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet"/>
<video id="video_page" class="video-js vjs-default-skin" loop autoplay width="683" height="384" preload="auto" data-setup='{}'>
  <source src="http://navademo.com/akva-group/uploads/videos/page_2_loop.ogv" type='video/ogg'>
</video>

Answer 1

Not sure but I think it's because you're using more of an older style of html and styling for the code? HTML5 and CSS3 is how you want to approach this if I'm not mistaken. The main thing you want to achieve here is to keep the CSS and HTML as separate as possible. This worked for me but if you find yourself stuck, this is what I used as a reference guide: http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

enter image description here

1. I used this smooth-scroll.js file and put it in the directory where I usually put in my jQuery files.

   $(function () {
     $('a[href*="#"]:not([href="#"])').click(function () {
       if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
         var target = $(this.hash);
         target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
         if (target.length) {
           $('html,body').animate({
             scrollTop: target.offset().top - 100
           }, 1000);
           return false;
         }
       }
     });
   });
   

---

Here is what your HTML would look like if you were to use the jQuery file that I've just mentioned.

<script async="" src="js/smooth-scroll.js"></script>

  <video preload="auto" autoplay="" loop="" muted="">
 <source src="http://navademo.com/akva-group/uploads/videos/page_2_loop.ogv">
  </video>

Shouldn't set the properties or style media directly onto HTML. You need CSS at this point.

  background: url(../images/terminal.jpg)
  no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;