Full video background?

[donboe]

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]

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

[guido2004]

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]

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'});
});

[Pullo]

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?

[donboe]

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]

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?

[donboe]

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]

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

[donboe]

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]

Hi donboe,

Sure that's possible.
Because BigVideo.js is built on top of Video.js, you can use the 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!

[donboe]

Hi donboe,

Sure that's possible.
Because BigVideo.js is built on top of Video.js, you can use the 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

[Pullo]

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

Just a slightly different syntax.
Try:

$("body").css('background-image', 'url(path/to/your/image/file.jpg)');

[donboe]

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]

Hi,

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:

$("#big-video-vid_html5_api").fadeOut(1400, function() {
    // Do some stuff here
});

HTH

[donboe]

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?

[Pullo]

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

[donboe]

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

[donboe]

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

[Pullo]

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);
});

[donboe]

Hi Pullo, I can't get this to work. What I would like is this:

• The side start with a Video
• The video fades out
• A image fades in.
• When the image is completely faded in the content fades in

I made two examples. In the first example I'm using your method where the background-image and content are first hidden. After the video is faded out the background image should fade in, and after that one is faded in the content should fade in:

<script type="text/javascript">
	$(document).ready(function(){
		$('#wrapper').hide();
		$('#background-image').hide();
	});
	$(function() {
		var BV = new $.BigVideo({useFlashForFirefox:false});
  		BV.init();
  		BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
  		BV.getPlayer().addEvent("ended", function(){
			$('#wrapper').hide();
    	$("#big-video-vid_html5_api").fadeOut(1400, function() {
				$("#background-image").fadein(1400, function() {
					$('#wrapper').fadeIn(1400);	
				
			});
		});
  });
});

As you can see is the video playing but after it is faded out, neither the background image or wrapper are showing?

In this second example I have the background-image fading in like I want it. But here I used a delayed function:

<script type="text/javascript">
	$(document).ready(function(){
		$('#background-image').hide().delay(18500).fadeIn(1500);
	});
	$(function() {
		var BV = new $.BigVideo({useFlashForFirefox:false});
  		BV.init();
  		BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
  		BV.getPlayer().addEvent("ended", function(){
				$("#big-video-vid_html5_api").fadeOut("slow");
					
  });
});
</script>

At least the image is fading in after the movie is faded out, but I am sure that there must be another more logical way then using the delay function. I hope that you see what I am doing wrong.

[Pullo]

Hi donboe,

Try this:

<!doctype html>
<html lang="en">
  <head>
  <base href="http://diem.sothenwhat.com" />
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/bigvideo.css" media="screen">
  </head>
  
  <body>
    <div id="background-image"></div>
    <!-- #wrapper -->
    <div id="wrapper">
      <!-- #header -->
      <div id="header">
        <ul id="menu">
          <li><a href="#" tabindex="1" title="Peter Diem Artwork">Artwork</a></li>
          <li><a href="#" tabindex="2" title="Peter Diem Video">Video</a></li>
          <li><a href="#" tabindex="3" title="Peter Diem Bio">Bio</a></li>
          <li><a href="#" tabindex="4" title="Peter Diem Counterfeit">Counterfeit</a></li>
          <li><a href="#" tabindex="5" title="Peter Diem Gallery">Gallery</a></li>
          <li><a href="#" tabindex="6" title="Peter Diem Contact">Contact</a></li>
        </ul>  
      </div><!-- #header -->
    </div><!-- #wrapper -->
      
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/video.js"></script>
    <script type="text/javascript" src="js/bigvideo.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#background-image, #wrapper").hide();
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
        BV.show('video/porsche.mp4', {altSource:'video/porsche.ogv'});
        BV.getPlayer().addEvent("ended", function(){
          console.log("here");
          $("#big-video-wrap").fadeOut(1400, function() {
            $("#background-image").fadeIn(1400, function() {
              $('#wrapper').fadeIn(1400);  
            });
          });
        });
      });
    </script>
  </body>
</html>

Any good?

[donboe]

Hi Pullo, It is working now but for some strange reason do I need to set the position of the wrapper div to absolute. If I set it to relative I get a vertical scrollbar. I only cant figure why?

[Pullo]

Hi Pullo, It is working now

Good, good

but for some strange reason do I need to set the position of the wrapper div to absolute. If I set it to relative I get a vertical scrollbar.

Yeah, I noticed this, too.
AFAIK this is not something influenced by the JavaScript, as showing and hiding elements just sets their display attribute accordingly.
If setting the position to absolute does the trick, I would just go with that

[donboe]

Thank you so much Pullo I don't see another option either I have one last question concerning the Javascript though. When the movie is faded out I get a white screen for about a second, is there anything I can do to avoid that? Should I for example set the background-image function before the big-video-wrap function?