thebeebs | How to Scroll Video using JQuery in 9 steps
thebeebs
Learn the art of website security
 
 

How to Scroll Video using JQuery in 9 steps

by thebeebs 2. November 2010 08:54

In the following post I’m going to show you how you can use the YouTube API and a little JQuery to recreate the scrolling video effect seen on http://www.agirlstory.org

You can see the demo I have created here: http://bit.ly/9hYU0N

For this demo I’m going to set up 2 videos and scroll between to two of them, but you can use this concept to scroll as many videos as you like.

Step 1

Add the reference to the YouTube API code that's hosted by our good friends at Google.

1 <script src="http://www.google.com/jsapi" type="text/javascript"></script> 2  <script type="text/javascript"> 3 google.load("swfobject", "2.1"); 4  </script>

Step 2

Add a reference to the JQuery Library, I’ve added the version hosted by Microsoft

1 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" 2 language="javascript" type="text/javascript"></script>

Step 3

Create some HTML layers where we can load the videos into later. I have named the video elements uniquely so that I can reference them later. I have also wrapped them in a containing Div layer so that I can scroll them them easily and using the JQuery animation function.

1 <div id="videoContainer"> 2 <div id="video1"></div> 3 <div id="video2"></div> 4 </div>

Step 4

Create a function called loadVideoPlayers that will Load the video files into objects in HTML objects that we created in Step 3

1 function loadVideoPlayers() { 2 // The videoID of the video to load from youtube. You can generally find this in the URL 3 // when you are watching a video on youtube 4 var videoID = "UO5v38cZ9cw" 5 // Because the SWF is calling JavaScript Cross Domain you will need to set this 6 // otherwise it won't have permission to raise events like onYouTubePlayerReady 7 var params = { allowScriptAccess: "always" }; 8 // This is the Id that the Object will have when created in the DOM 9 // we will use this to obtain a reference to the object later using $("#player1").get(0); 10 var atts = { id: "player1" }; 11 // We can then Embed using googles swfobject 12 swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 13 "&enablejsapi=1&playerapiid=player1", 14 "video1", "480", "295", "8", null, null, params, atts); 15 16 // Now do it all again with a different player 17 var videoID2 = "g3kHe8wlGh4" 18 var params = { allowScriptAccess: "always" }; 19 var atts = { id: "player2" }; 20 swfobject.embedSWF("http://www.youtube.com/v/" + videoID2 + 21 "&enablejsapi=1&playerapiid=player2", 22 "video2", "480", "295", "8", null, null, params, atts); 23 }

Step 5

When the page loads we will need to call loadVideoPlayers you can use JQuery to do this easily:

1 $(document).ready(function () { 2 loadVideoPlayers(); 3 });

Step 6

When the video player is loaded and ready to roll the SWF object will call a specific function on your page that must be called onYouTubePlayerReady. I use this function to create an object reference and then call either UpdatePlayerInfo or UpdatePlayerInfo2.

1 // This function is automatically called by the player once it loads 2 function onYouTubePlayerReady(playerId) { 3 // The player ID comes from the "playerapiid" parameter that was set 4 // when the embedded player was loaded 5 if (playerId == "player1") { 6 objVideo1 = $("#player1").get(0); 7 updatePlayerInfo(); 8 } 9 else if (playerId == "player2") { 10 objVideo2 = $("#player2").get(0); 11 updatePlayerInfo2(); 12 } 13 }

Step 7

The two updatePlayer nfo functions are called when the Video is ready to play and then every 250 milliseconds. These functions are where all your logic for controlling the video should go. In my simple example I have said that if the Players current position is greater than x seconds pause the current video and move on to the next one. I then scroll the Video using either the scrollToVideo1 or scrollToVideo2 functions.

 

1 // Display information about the current state of the player 2 function updatePlayerInfo() { 3 if (objVideo1 && objVideo1.getPlayerState() == 1 && objVideo1.getDuration) { 4 if (objVideo1.getCurrentTime() > 5) { 5 objVideo1.pauseVideo(); 6 objVideo1.seekTo(0, true); 7 objVideo2.seekTo(6, true); 8 objVideo2.playVideo(); 9 scrollToVideo2() 10 } 11 } 12 setTimeout(updatePlayerInfo, 250); 13 } 14 15 // Display information about the current state of the player 16 function updatePlayerInfo2() { 17 if (objVideo2 && objVideo2.getPlayerState() == 1 && objVideo2.getDuration) { 18 if (objVideo2.getCurrentTime() >= 13) { 19 objVideo2.seekTo(6, true); 20 objVideo2.pauseVideo(); 21 objVideo1.playVideo(); 22 scrollToVideo1() 23 } 24 } 25 setTimeout(updatePlayerInfo2, 250); 26 }

 

Step 8

Set up some CSS. I set up some base CSS just to give the body a little margin and to set up the video container so that it can be animated using the JQuery animate library.

1 <style> 2 body 3 { 4 padding: 40px; 5 } 6 #videoContainer 7 { 8 position: relative; 9 left: 0px; 10 top: 0px; 11 width: 1000px; 12 height: 295px; 13 overflow: hidden; 14 } 15 </style>

Step 9

Add the two scroll method. These were referenced earlier and are used o to animate the Video Container. I’ve used the JQuery animation because it’s so simple to use. You can find out more about it here: http://api.jquery.com/animate/ 

1 function scrollToVideo1() { 2 $("#videoContainer").animate({ 3 left: '0' 4 }, 1000); 5 } 6 7 function scrollToVideo2() { 8 $("#videoContainer").animate({ 9 left: '-480' 10 }, 1000); 11 }

I hope these steps explain how to combine YouTube and JQuery to create a really interesting effect. If you try this out for yourself let me know how you get on.

Tags:

Comments (5) -

the diet solution review
the diet solution review United States
6/30/2011 1:36:08 PM #

rolled

the diet solution
the diet solution United States
7/1/2011 1:24:36 PM #

heart vacancy the wanted

stratford on avon hotels
stratford on avon hotels United States
9/5/2011 9:23:38 PM #

Hey this is a great post. Could you keep me updated with any other info similar to this? If travelling to the UK why not stay at Stratford hotel and watch a Shakespear play

Birmingham Airport Parking
Birmingham Airport Parking United States
9/7/2011 9:49:57 AM #

What a struggle to find Parking at Birmingham Airport.

Birmingham Website Design
Birmingham Website Design United Kingdom
10/11/2011 12:21:02 AM #

Good post Smile

Comments are closed