Post
Ask Question

Video Scroller in JavaScript

Introduction

 
Here we show a simple example of a Video Scroller in JavaScript. Here we use images to be scrolled using jQuery fadeIn() and fadeOut() functions and the video will be shown in a PopUp window like this:
  
VidScro1.jpg
 
VidScro2.jpg
 
The popup window will be shown in the middle of the screen.
 
Step 1
 
First, we will use some images:
 
VidScro3.jpg
 
VidScro4.jpg
 
Then we will write the code:
  1. <div> Videos</div>  
  2. <table width="330" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">  
  3.             <tr>  
  4.                 <td>  
  5.                     <a id="pvideo11" class="pvideo">  
  6.                         <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>  
  7.                     <a id="pvideo12" class="pvideo">  
  8.                         <img id="imgVideo1" src="Second Video.png" onclick="NewWindow('Bin Tere.html','win','500','350','no','center');return false" /></a>  
  9.                     <a id="pvideo13" class="pvideo">  
  10.                         <img id="imgVideo2" src="Third Video.png" onclick="NewWindow('I Love You.html','win','500','350','no','center');return false" /></a>  
  11.                     <a id="pvideo14" class="pvideo">  
  12.                         <img id="imgVideo3" src="Fourth Video.png" onclick="NewWindow('Oh Hum Dum.html','win','500','350','no','center');return false" /></a>  
  13.                     <a id="pvideo15" class="pvideo">  
  14.                         <img id="imgVideo4" src="Fifth Video.png" onclick="NewWindow('Lakshya.html','win','500','350','no','center');return false" /></a>  
  15.                 </td>  
  16.             </tr>  
  17.         </table>  
  18.         </div>  
  19.         <script type='text/javascript'>//<![CDATA[  
  20.    
  21.             (function () {  
  22.    
  23.                 var quotes = $(".pvideo");  
  24.                 var quoteIndex = -1;  
  25.    
  26.                 function showNextQuote() {  
  27.                     ++quoteIndex;  
  28.                     quotes.eq(quoteIndex % quotes.length)  
  29. .fadeIn(2000)  
  30. .delay(2000)  
  31. .fadeOut(2000, showNextQuote);  
  32.                 }  
  33.    
  34.                 showNextQuote();  
  35.    
  36.             })();  
  37. //]]>  
  38.    
  39. </script> 
Step 2
 
Now we create various HTML pages to show the window in the PopUp Window (in this article, I will discuss only one HTML page coding); see:
 
TeriMeri.html
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5.   <table cellpadding="0" cellspacing="0">  
  6.                 <tr>  
  7.                     <td>  
  8.                         <iframe id="i1" width="560" height="300px" src="http://www.youtube.com/embed/QqgJkkVaWk8"  
  9.                             frameborder="0" allowfullscreen></iframe>  
  10.                     </td>  
  11.                 </tr>  
  12.             </table>  
  13. </body>  
  14. </html> 
Here we will use the <iframe> tag to show the video and set the source of the video here. So when we run this page the output will be:
 
VidScro5.jpg
 
Step 3
 
Now we will write the code in our Main (Video Scroller.html) page like this:
  1. <a id="pvideo11" class="pvideo">  
  2.             <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>  
  3.         Now we will write the JavaScript Code Like this:  
  4.         <script language="javascript" type="text/javascript">  
  5.             $(function () { $("a.youtube").YouTubePopup().click(); });  
  6.             $.fn.YouTubePopup.defaults = { 'youtubeId': '', 'title': '', 'idAttribute': 'rel', 'draggable': false, 'modal': true, 'width': 640, 'height': 480, 'hideTitleBar': false, 'clickOutsideClose': true, 'overlayOpacity': 0.5, 'autohide': 2, 'autoplay': 1, 'color': 'red', 'color1': 'FFFFFF', 'color2': 'FFFFFF', 'controls': 1, 'fullscreen': 1, 'loop': 0, 'hd': 1, 'showinfo': 0, 'theme': 'light' };  
  7.    
  8.             var win = null;  
  9.             function NewWindow(mypage, myname, w, h, scroll, pos) {  
  10.                 if (pos == "random") { LeftPosition = (screen.width) ? Math.floor(Math.random() * (screen.width - w)) : 100; TopPosition = (screen.height) ? Math.floor(Math.random() * ((screen.height - h) - 75)) : 100; }  
  11.                 if (pos == "center") { LeftPosition = (screen.width) ? (screen.width - w) / 2 : 100; TopPosition = (screen.height) ? (screen.height - h) / 2 : 100; }  
  12.                 else if ((pos != "center" && pos != "random") || pos == null) { LeftPosition = 0; TopPosition = 20 }  
  13.                 settings = 'width=' + w + ',height=' + h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';  
  14.                 win = window.open(mypage, myname, settings);  
  15.             }  
  16.    
  17. </script> 
The output will be:
 
VidScro6.jpg


Similar Articles