Hi all. I am working on a website where the owner wants to have a full screen video background to start with which should end with a full image background. They don’t want to use Flash. What would be the best option? I saw some jQuery options but most doesn’t support iPad/iPhone. Any suggestion will be highly appreciated.
Hi I have decided to use BigVideo.js. It all seems to work reasonably well when I use the link as in the example file:
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
as you can see here
But as soon as I use a link to a video(mp4) on my own server IE isn’t showing the background at all as you can see here. Does someone has an idea what the reason can be or know how to solve this. Thank you in advance
The page in your second link contains a <video> tag, not Jquery and not bigvideo.
By the way, when I rightclick on the playing video, my browser (FF) tells me that it’s a flash object. Does the jquery script use the available player (no flash on the iPhone) ?
Hi Guido. That you saw the video tag was a confluence of circumstances. Since it wasn’t working in the right way I was trying the <video> tag as well. I just have put it back the way it was. I hope you will see what I am doing wrong.
By the way, when I rightclick on the playing video, my browser (FF) tells me that it’s a flash object. Does the jquery script use the available player (no flash on the iPhone) ?
They have this option:
$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();
BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});
Hi donboe,
Just saw this thread now and had a look at the link you posted (http://www.sothenwhat.com/test2.html).
It works for me in Internet Explorer versions 7 - 10.
Did you change something in the meantime?
Hi Pullo. The link you saw is indeed working for me as well. That one is linking to a video file on the server from the person that developed BigVideo. The problem I have is with the other link. . In that one I have a link to a video on my own server, but that one isn’t showing in IE.
Ah ok.
For me, the second link works in IE7, IE8, but not IE9 and 10 (which is weird).
Anyway, it’s almost certainly a server configuration issue, as if I download the video to my PC and include it in the web page from there, it works fine in IE9 and IE10:
e.g.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('C:/Users/Pullo/Desktop/oceans-clip.mp4');
});
So, what to do:
Try creating a plain text file, name it “.htaccess” and using your editor of choice, enter the following:
#Video MIME Types:
AddType video/m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Save it, then upload it to the root directory of your website.
You might have some difficulty saving a file that begins with a dot on a Windows box. If so, call it htaccess.txt, upload it to the server and rename it there.
Does doing that make a difference?
Hi Pullo. That with the .htaccess works great. Thank you so much. You really made my day. 
I was near to throwing my cloves in the ring 
Cool man, I’m glad we got it working
Thanks for taking the time to report back.
Hi Pullo I am really glad it is working. I am wondering! Is there any way that at the end of the movie it will be replaced by a photo background and that some content will appear on top of that, like a delayed function? Or should I use a complete different plugin for the video background.
Hi donboe,
Sure that’s possible.
Because BigVideo.js is built on top of Video.js, you can use the [URL=“http://videojs.com/docs/api/”]Video.js api.
You can access the player using the getPlayer() method, then you can attach an event listener to the player, such as “ended”, which is fired when the end of the media resource is reached. (i.e. currentTime == duration)
For example:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('C:/Users/Jim/Desktop/oceans-clip.mp4');
BV.getPlayer().addEvent("ended", function(){
$("body").css("background", "red");
$("#big-video-vid_html5_api").fadeOut("slow");
});
});
BTW, it must suck to be one of those fish. They appear to be being eaten by dolphins, birds, sharks and whales!
That works great Pullo. It al look so simple but I cant figure certain things. Can I instead use an image for the replacement. I tried $(“body”).css(“background”, “img/porsche.jpg”); but that wasn’t working
Yes to be one of those fishes must suck indeed
Just a slightly different syntax.
Try:
$("body").css('background-image', 'url(path/to/your/image/file.jpg)');
Hi Pullo. That works great indeed. One last question though! Ist here any way to have a function start, whenever the $(“#big-video-vid_html5_api”).fadeOut(1400); is finished? Thank you in advance. For example to make a div fade in!
Hi,
Sure!
fadeOut() takes a call back function, so something like this should work:
$("#big-video-vid_html5_api").fadeOut(1400, function() {
// Do some stuff here
});
HTH
So if I place something like:
$(‘#container’).hide().fadeIn(1500);
behind
$(“#big-video-vid_html5_api”).fadeOut(1400, function() {
it would only fade in after the previous one is faded out?
Kinda. You want to have it as a callback function (so within, not behind), otherwise they will execute asynchronously.
E.g.
$("#big-video-vid_html5_api").fadeOut(1400, function() {
$('#container').hide().fadeIn(1500);
});
Sorry if this was just a linguistic thing and this is what you meant in the first place
I understand. Thank you so much
Edit:
Mmmm The container isn’t hiding. Shouldn’t that be hidden on page load, or should I declare that in my css
Mmmm The container isn’t hiding when tha page opens. Shouldn’t that be hidden on page load, or should I declare that in my css
Might be better to do it via JS, as that way, people with JS disabled still get to see some content.
I was kind of confused as to why you wanted to hide it, then fade it straight back in again, anyway
Something like this should work:
$('#container').hide();
$("#big-video-vid_html5_api").fadeOut(1400, function() {
// This will run after "#big-video-vid_html5_api" has faded out.
$('#container').fadeIn(1500);
});