SitePoint Sponsor

User Tag List

Results 1 to 25 of 32

Hybrid View

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,110
    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
    2,110
    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,500
    Mentioned
    163 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    2,110
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 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?

  17. #17
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,110
    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)

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

  19. #19
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,110
    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)

  20. #20
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by donboe View Post
    When the movie is faded out I get a white screen for about a second, is there anything I can do to avoid that?
    That is being caused by fading the movie out.
    Why don't you just leave the movie where it is and fade the other two elements in on top of it?

    Like 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(){
              $("#background-image").fadeIn();
              $('#wrapper').fadeIn(1400);
            });
          });
        </script>
      </body>
    </html>

  21. #21
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I don't think so.
    As you can see, my demo just pulls in all of your style-sheets and it seems to work ok as it is.

  22. #22
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Pullo,
    could you please have a look at my script?
    Trying to hide a div (boxie) at the beginning of the movie en showing it back after de video has completed.
    Can't get it to work en pulling my hear out for hours now.
    thanks in advance!!

    Code:
    <style type="text/css">
    #boxie {position: relative;height:300px;width:300px;z-index:10000;border:1px solid red;background-color:#FFFFFF;}
    </style>
    
    <div id="boxie"></div>
    
    <script type="text/javascript">
    var BV;
    $(document).ready(function(){
    	// hide #boxie
    	$('#boxie').css('display', 'none');
                
      // initialize BigVideo
      BV = new $.BigVideo();
    	BV.init();
    	if (Modernizr.touch) {
    		BV.show('beeld_circus.png');
    	} else {
    		BV.show('1778-ani_fr800-1000.mp4',{loop:false});
    	}
    
    	// at end of video show #boxie
    	BV.getPlayer().addEvent("ended", function(){
    		$('#boxie').css('display', 'block');
    	})
    	
    });
    </script>
    you can see it (not) working here

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

    Welcome to the forums

    In Video.js 4.0, addEvent was replace by on.

    Change your JS to this and all will be well:

    Code JavaScript:
    $('#boxie').css('display', 'none');
     
    var BV = new $.BigVideo();
    BV.init();
    if (Modernizr.touch) {
      BV.show('beeld_circus.png');
    } else {
      BV.show('1778-ani_fr800-1000.mp4',{loop:false});
    }
     
    BV.getPlayer().on("ended", function(){
      $('#boxie').css('display', 'block');
    })

    Please also notice that wrapping everything in a $(document).ready() callback is also not necessary.

    HTH

  24. #24
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, you just made my day/week/month/year :-)
    Many many thanks!!!
    Cheerzzzz
    Hans

  25. #25
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No problem.
    Happy to help


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
  •