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.

donboe
—
2013-05-11T06:57:51Z —
#2

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:

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

guido2004
—
2013-05-11T08:57:28Z —
#3

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) ?

donboe
—
2013-05-11T09:47:49Z —
#4

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) ?

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?

donboe
—
2013-05-11T12:24:59Z —
#6

Pullo said:

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.

Pullo
—
2013-05-11T12:51:52Z —
#7

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:

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?

donboe
—
2013-05-11T13:04:38Z —
#8

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

Pullo
—
2013-05-11T13:13:38Z —
#9

Cool man, I'm glad we got it working Thanks for taking the time to report back.

donboe
—
2013-05-11T17:44:42Z —
#10

Pullo said:

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.

Pullo
—
2013-05-11T18:16:44Z —
#11

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](http://videojs.com/).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)

BTW, it must suck to be one of those fish. They appear to be being eaten by dolphins, birds, sharks and whales!

donboe
—
2013-05-11T19:58:18Z —
#12

Pullo said:

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](http://videojs.com/). 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)

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

Pullo
—
2013-05-11T20:07:27Z —
#13

donboe said:

Can I instead use an image for the replacement. I tried $("body").css("background", "img/porsche.jpg"); but that wasn't working

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!

Pullo
—
2013-05-13T10:00:35Z —
#15

Hi,

donboe said:

Is there any way to have a function start, whenever the $("#big-video-vid_html5_api").fadeOut(1400); is finished?

Sure!

fadeOut() takes a call back function, so something like this should work: