victa / html5-background-video Goto Github PK

Is it possible to have the video backgrounds autopause, when scrolled past them and to only play, when they are visible in the window? I two video background sections on one page, and the first video, which is all the way in the top as a banner, is working fine and stops at the right time when I scroll past it but the other video further down also plays/pauses according to the first video in the top.

I have used this script:

var videos = document.getElementsByTagName("video"),
        fraction = 0.8;
        function checkScroll() {

            for(var i = 0; i < videos.length; i++) {

                var video = videos[i];

                var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                    b = y + h, //bottom
                    visibleX, visibleY, visible;

                    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                    visible = visibleX * visibleY / (w * h);

                    if (visible > fraction) {
                        video.play();
                    } else {
                        video.pause();
                    }

            }

        }

        window.addEventListener('scroll', checkScroll, false);
        window.addEventListener('resize', checkScroll, false);

Thanks :)

Chrome doesn't play well with z-indices and as the HTML5 background is set to z-index: -100, it causes Chrome to have issues while displaying it along with Twitter Bootstrap's navigation menu. When you combine the two, then scroll past the video and back up, Chrome shows the bootstrap menu breaking apart and eventually vanishing.

The only real way to fix this is to manually edit the source of the js file which is bad custom. Please set the z-index to 0.

I cant seem to figure out how to make the video align to the top.

Here is what I got. What am i doing wrong?

var BV = new $.BigVideo({container: $('.home-hero'), useFlashForFirefox:false, doLoop: true},);
BV.init();
BV.show([
{ type: "video/mp4", src: "http://foundation-2:8888/wp-content/themes/nuvo-express/videos/Fear Sizzle_newest.mp4", align: "centerY" },
{ type: "video/webm", src: "http://foundation-2:8888/wp-content/themes/nuvo-express/videos/cloud.webm" },
{ type: "video/ogg", src: "http://foundation-2:8888/wp-content/themes/nuvo-express/videos/cloud.ogv" },
//{ align: "centerY" }
],{ambient:true});

When I view my site in mobile it shows a play icon over the image and the flash fallback isn't working in IE8. Do you know what could be the issue? Here is the link to my site http://roydezign.co/demo/ftllp/backvideo/

Great plugin, thanks much. When I load a site at mobile width, then resize the browser to desktop width I get the white screen of death. Seems to happen in all browsers. Any ideas?

Hello,

I would like to turn off LOOP function not to play background video over & over. I tried in the javascript to do this:

1. html += '<video class="hidden-xs hidden-sm" id="'+plugin.settings.videoid+'" preload="auto" autoplay="autoplay"'; - removing loop
2. html += '<video class="hidden-xs hidden-sm" id="'+plugin.settings.videoid+'" preload="auto" autoplay="autoplay" loop="false"';
3. 1. html += '<video class="hidden-xs hidden-sm" id="'+plugin.settings.videoid+'" preload="auto" autoplay="autoplay" loop="false" loop=""';

None works, if I do:

Hardcode to HTML without attribute loop it works but I am missing all js features.

so what should I do in the js that it would play only once?

Thanks

Hi, while testing your plugin you provided i noticed that it would not play the video on ipad, instead it show a picture. could you tell me whether the code will work on other mobile devices like iphone. and is there any way to fix the ipad freezing video

Thanks in advanced.

i tried to edit this to use, e.g. "http://view.vzaar.com/1152805/video" as the source rather than the existing path, filename and types but it's beyond my js ability. can anybody help?

I am having issue with the "with-flash-and-image-fallbacks.html" file.

It will not play the video on my desktop browser. Shouldn't the video be playing on desktop and fall back to image and flash on mobile? It only shows the cloud image.

I am on a mac using chrome and firefox.

I keep getting this error in the console. Uncaught TypeError: undefined is not a function.

Is it in any way possible to have more than one video playing as background on other sections on one page? And if yes, then how? :)

Thanks for a great plugin, btw!

The video is not playing most of the time however if i hit CTRL+F5 it works but then if i close that tab and open in a new one the video donot play.

Hi, I'm testing this with Safari 5.17, and it's not working - just a black background. I used your example. Thanks, A

thanks for great plugin, could you show me how to customize the video control so that it will appear wherever i want on the web page.

When I initialize the video on a div the video seems to stretch the entire size of the screen. It doesn't get contained to the div it's in. Not sure if this is intended or not, but it looks like here this should be possible :
#14

Could use modernizer to choose the smallest file when there are >1 compatible codecs.
That is: use webm in chrome, even though mp4 is supported.