Multiple videos in different containers

[wilgrace]

Hi, apologies if this has been answered elsewhere...

I'm using a combination of FullPage.js and BigVideo.js to add fullscreen panels of images and video as the user scrolls down the page. Loading a video into a container anywhere on the page works fine (thanks!), but when I try to load in another to a different container the

This is what I'm calling:

$(function() {

var TEST1 = new $.BigVideo({useFlashForFirefox:false, container:$('.video-wrapper1')}); var TEST2 = new $.BigVideo({useFlashForFirefox:false, container:$('.video-wrapper2')});

TEST1.init(); TEST2.show('vids/river.mp4',{ambient:true}); TES2.init(); TEST.show('vids/sherlockholmes.mp4',{ambient:true});

});

Am I calling the videos incorrectly? Does BigVideo support two videos in containers on the same page?

Thanks so much Wil

[sparksm]

I wasn't able to get that to work. The problem is that the html generated from the code targets a specific id. You'll notice that each init injects an element with the same id. Browsers will only target the first instance of the id since id's are unique.

I modified the source on my fork to include an 'id' option in the defaults object that is used to give an id to each instance. (there is surely a better way - like using the option's container element and dom traversal to target scoped classes instead of ids)

https://github.com/sparksm/BigVideo.js/blob/master/lib/bigvideo.js

It's not great code but it works for how i'm using the plugin.

    var $videos = $('.video');
    var bvs = [];
    $.each($videos, function (i, elm) {
        bvs[i] = new $.BigVideo({
            useFlashForFirefox: false,
            container: $(elm),
            id: i
        });
        bvs[i].init();
        bvs[i].show($(elm).data('video'), {
            ambient: true
        });
    });

Be warned however, running more that one or two videos gets really resource heavy. Maybe I'll fix it up and contribute back later.

[wilgrace]

Good man, thanks very much for the response. I'll have a go with your fork and code and post the results back here

Thanks again — Sent from Mailbox for iPhone

On Fri, Jan 24, 2014 at 4:50 PM, Michael Sparks notifications@github.com wrote:

I wasn't able to get that to work. The problem is that the html generated from the code targets a specific id. You'll notice that each init injects an element with the same id. Browsers will only target the first instance of the id since id's are unique. I modified the source on my fork to include an 'id' option in the defaults object that is used to give an id to each instance. (there is surely a better way - like using the option's container element and dom traversal to target scoped classes instead of ids) https://github.com/sparksm/BigVideo.js/blob/master/lib/bigvideo.js It's not great code but it works for how i'm using the plugin. var $videos = $('.video'); var bvs = []; $.each($videos, function (i, elm) { bvs[i] = new $.BigVideo({ useFlashForFirefox: false, container: $(elm), id: i }); bvs[i].init(); bvs[i].show($(elm).data('video'), { ambient: true }); }); Be warned however, running more that one or two videos gets really resource heavy.

Maybe I'll fix it up and contribute back later.

Reply to this email directly or view it on GitHub: https://github.com/dfcb/BigVideo.js/issues/99#issuecomment-33239536

[rossluebe]

@sparksm This was extremely helpful for me, thanks.

[matyushen]

I'm trying to use this code to be able to get more than one bg-video-div on a page(for slider). Here is how:

<div class="video" data-video="video1.mp4"></div>
<div class="video" data-video="video2.mp4"></div>

But it's working only if one .video div present on a page. What's wrong here?

[aonzzung]

@sparksm This is what I'm finding. Does the plugin author decide to add this feature to the core?

[johnpolacek]

Unfortunately, I no longer have write access to this repository (I left the company almost a year ago).

I think the time is ripe for me to pass the torch on this project. Any takers?

[sparksm]

I'm open to it.

[thoughtpalette]

+1

[ZeeshanKhalidSE]

Thanks man.

+1

[rajnikakadiya]

Thanks man

+1

[clementbiron]

Is the feature planned soon ?

[thoughtpalette]

@posykrat with 4 PR's open, two from 2014, I doubt it. May as well fork and play around with it. Don't bother submitting a PR.