CODEWITHSUNDEEP
jqueryhtmlvideohtml5-videovideo.js
eightonrose
eightonrose

Reputation: 688

Video Background Not Looping (BigVideo.js / Video.js)

So I'm trying to make a background of my web page a video using BigVideo.js.

I followed the (severely limited) documentation for BigVideo.js, which is built on top of Video.js.

So, here's what I have so far: I'm trying to load this: http://eitanrosenberg.com/projects/kvr-splash/assets/video/teaser.mp4

In my index.html, I have included all of the dependencies and scripts.

My main problem is that the video isn't looping. It stops at the very end when it should be looping. I've tried three different methods.

In my script.js:

First method:

var BV = new $.BigVideo({doLoop: true});
BV.init();
BV.show('../assets/video/teaser.mp4');

This is the way that apparently BigVideo.js sets the video to loop -- the boolean is in their plugin.

Second method:

var BV = new $.BigVideo();
BV.init();
BV.show('../assets/video/teaser.mp4', {ambient: true});

Apparently (and looking at the plugin's code), if you set the video to "ambient: true", then the video is silent and loops.

Third method:

var BV = new $.BigVideo();
BV.init();
BV.show('../assets/video/teaser.mp4');

// manually setting the video to 'loop'
$('video.vjs-tech').prop('loop', true);

I've tried them all interchangeably, and nothing has worked. Is there something I'm missing? I have even tried encoding the video differently or to a smaller size just to see if that was it, and nothing has worked so far. I would greatly appreciate any help. Thanks!

EDIT I've tried embedding the video manually, and it still freezes at the end instead of looping.

<video id="big-video-vid_html5_api" class="vjs-tech" preload="auto" data-setup="{}" webkit-playsinline="" style="position: absolute; width: 1403px; height: auto;" autoplay="" src="../assets/video/teaser.mp4" loop></video>

I've also tried:

BV.getPlayer().on("ended", function () {
    this.play();
});

and it still freezes at the end.

Upvotes: 1

Views: 2538

Answers (1)

Far
Far

Reputation: 147

Try this. It is working for me

doLoop:false

example

var BV = new $.BigVideo(); BV.init(); BV.show('../assets/video/teaser.mp4',{doLoop:true});

Check the parameters of what you can do with the video in the "bigvideo.js" file.

Upvotes: 1

Related Questions