SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full video background?

    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,399
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    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) ?

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    $(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
        BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
    });
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    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?

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code JavaScript:
    $(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:

    Code:
    #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?

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Cool man, I'm glad we got it working
    Thanks for taking the time to report back.

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  11. #11
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code JavaScript:
    $(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!

  12. #12
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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:

    Code JavaScript:
    $(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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  13. #13
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    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:

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

  14. #14
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  15. #15
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    Quote Originally Posted by donboe View Post
    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:

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

    HTH

  16. #16
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  17. #17
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    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.

    Code JavaScript:
    $("#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

  18. #18
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  19. #19
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  20. #20
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    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:


    Code JavaScript:
    $('#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);
    });

  21. #21
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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:
    Code:
    <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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  22. #22
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi donboe,

    Try this:

    Code:
    <!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?

  23. #23
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  24. #24
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi Pullo, It is working now
    Good, good

    Quote Originally Posted by donboe View Post
    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

  25. #25
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •