SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 32 of 32
  1. #26
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 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>

  2. #27
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a good option indeed. Does that mean that I have to set a z-index (lower then the other ones) on the big-video-wrap
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #28
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 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.

  4. #29
    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

  5. #30
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 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

  6. #31
    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

  7. #32
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 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
  •