JavaScript - Video Archive

Greetings

I'm using a script to display rotating youtube videos in the sidebar of my invision board. The problem is that the random thing causes the same video to be repeated twice in row at times. I need to add a cookie so that no video gets displayed to the same user until all other videos have been displayed. I also look for adding - if possible - a line to count the videos, so that I don't have to edit the number each time I add more videos..

Can someone please help me with that?
Here is the script I'm using:

Code:

<script type="text/javascript">

function rand ( n )
{
  return ( Math.floor ( Math.random ( ) * n + 1 ) );
}

// Store youtube [CHANGES NEEDED IN THE 3 URLS BELOW]
var vids = new Array ( );
vids[0] = "http://www.youtube.com/embed/aF4M0JtoIPk";
vids[1] = "http://www.youtube.com/embed/KMxWhovYfzc";
vids[2] = "http://www.youtube.com/embed/ffZUWZQE0EU";
vids[3] = "http://www.youtube.com/embed/povUgNcf4aI";
vids[4] = "http://www.youtube.com/embed/Zs9u7X0rrd0";
vids[5] = "http://www.youtube.com/embed/D4L0KpqNzkU";
vids[6] = "http://www.youtube.com/embed/Mfdnb0Q7IBM";
vids[7] = "http://www.youtube.com/embed/D-JJpPBjQwI";
vids[8] = "http://www.youtube.com/embed/kn5NSCJ2tiI";
vids[9] = "http://www.youtube.com/embed/BDxDMCWShds";

// Pick a random video from the list
function pick_vid ( )
{
  var numberOfImages = 10; //[CHANGE THE 3 TO THE TOTAL NUMBER OF VIDS YOU USE]
  var num = rand(numberOfImages)-1;
  
  document.getElementById("random_youtube_vid").src = vids[num];
}
</script>

<script type="text/javascript">window.onload=pick_vid;</script>
<p style="padding: 6px 0;text-align:center">
<iframe id="random_youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe>
</p>

I found another scripts that could be of help, as it uses div and cookies..
But its for general display of anything. It doesn't have the iframe for the video. I don't know how to merge both scripts. Or perhaps you have better ideas..

Code:

<div id="randomdiv1" style="display:none;">
[content for div 1]
</div>
<div id="randomdiv2" style="display:none;">
[content for div 2]
</div>
<div id="randomdiv3" style="display:none;">
[content for div 3]
</div>

<script type="text/javascript" language="JavaScript"><!--
/* Random Div Display
   Version 1.0
   March 9, 2009
   Will Bontrager
   http://www.willmaster.com/
   Copyright 2009 Bontrager Connection, LLC
For information about implementing this software, see the article at
http://www.willmaster.com/library/javascript/random-div-display.php
*/
// One place to customize:
//
// Type the number of div containers to randomly display.
NumberOfDivsToRandomDisplay = 3;
// No other customizations required.
////////////////////////////////////
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
          cookiebegin += 1 + CookieName.length;
          cookieend = document.cookie.indexOf(";",cookiebegin);
          if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
          ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
          }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }
document.getElementById("randomdiv"+r).style.display="block";
}
DisplayRandomDiv();
//--></script>

Many thanks in advance.

I am new to javascript (I started learning it today) so please explain it for newbies.

I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video.

Then, I divide them to get the precentage which was buffered so far.

I have no problem storing the durating using:
Code:

var duration = document.getElementById('vid').duration

- returns "12.6" (seconds)


I am struggling with getting the buffered time. I tried:
Code:

var buffered = document.getElementById('vid').buffered

This one returns "[object TimeRanges]".
From what I understood this is some kind of an object (Like an array?).
I tried returning "buffered.length" and I get "1" back.

Please explain how I can do this. thanks

01) I would like to rollover (onmouseover?) a button that is a video and have the video (button) play. (A 5 sec video that stops at end)

02) On rolloff (onmouseoff?) the same button I would like it to rewind to the beginning for next rollover.

03) I would like to add more of these "Video Button Rollovers" to the same website page in the future. I would like to use DreamWeaver CS4, and stay away from flash for more accessibility and less memory intensive overhead. (obviously no control-bar for video)
-----
I have all the parts to this to try a variety of solutions.
-----
-The video is a box with untied string on a white background.
- When played a person fades-on and ties the string into a bow.
(white background matches website background)
-----
Parts:
01) video from untied box to tied box with person .mov
02) image of first frame of video .jpg
03) video from untied box to tied box with person to person fade-off and untied box .mov
04) video of tied box with person to person fade-off and untied box.mov
-----
The parts will be on this website: http://mydata.salve.edu/emersonb/g2/media.html

Thanks

I would like multiple videos one one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far:

Code:

<script type="text/javascript" src="video/swfobject.js"></script> 
<script type="text/javascript"> 
var flashvars = {}; 
flashvars.src = "http://www.mysite.com.mp4"; 
flashvars.controlBarMode = "floating"; 
flashvars.poster = "http://mysite.com/imageonplayer.png"; 

var params = {}; 
params.allowfullscreen = "true"; 
params.allowscriptaccess = "always"; 

var attributes = {}; 
attributes.id = "videoDiv"; 
attributes.name = "myDynamicContent"; 

swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes); 
</script> 
</head>

Code:

<div id="videoDiv"> 
<video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> 
<source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> 
<source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> 
</video> 
</div>

I assigned each player an individual id like this as suggested on another thread but that didn't work. Any suggestions? :
Code:

<script type="text/javascript"> 
swfobject.registerObject("videoDiv1", "10.1.0"); 
swfobject.registerObject("videoDiv2", "10.1.0"); 
swfobject.registerObject("videoDiv3", "10.1.0"); 
swfobject.registerObject("videoDiv4", "10.1.0"); 
</script>

Thanks
Dan

I want to run a flash video on my web site. I've been working on this for days now, and obviously missing something.

The page is really BRIEF -- nothing more than <object> calls and swfobject.registerObject call.

when I look at it on the server, I get a totally blank page in IE. In firefox, I see a little "block" tab where the movie frame would be if it worked.

Here is the whole code:

thanks so much for looking at it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="SHORTCUT ICON" HREF="http://olympiceq.com/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Olympic Equine</title>
</head>

<body> 
 
  
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="360" height="264" id="FLVPlayer">
          <param name="movie" value="FLVPlayer_Progressive.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="scale" value="noscale" />
          <param name="salign" value="lt" />
          <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Corona_Skin_2&amp;streamName=HorseswithClicktoPlay&amp;autoPlay=false&amp;autoRewind=false" />
          <param name="swfversion" value="8,0,0,0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="expressInstall.swf" />
         
		  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="360" height="264">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="scale" value="noscale" />
            <param name="salign" value="lt" />
            <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Corona_Skin_2&amp;streamName=HorseswithClicktoPlay&amp;autoPlay=false&amp;autoRewind=false" />
            <param name="swfversion" value="8,0,0,0" />
            <param name="expressinstall" value="expressInstall.swf" />
           
		    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
            </div>
            
			<!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
    
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

</body>
</html>

I want to encrypt my video file and wants to give source url of that file in my web page and while before playing of that file on my web page I want enable password for authentication.
How to do this? (Using javascript or html5 )

Hello there,
I am new to javascript. I would like to remove the div containing a video, by javascript, on the 'onended' event, but am not sure how to do this yet.
Here is my code so far:
Code:

<body onload="javascript:showDiv()">
<div class="fullscreen" id="fullscreen">
<video autoplay="autoplay" >
  		<source src="stage.mp4" type="video/mp4" />
	  	<source src="stage.webm" type="video/webm" />
	</video>
  </div>

<script> 
function hideDiv() { 
if (document.getElementById) { 
document.getElementById('fullscreen').style.visibility = 'hidden'; 
} 
} 
function showDiv() { 
if (document.getElementById) { 
document.getElementById('fullscreen').style.visibility = 'visible'; 
} 
} 
</script> 
   <script>
   
    var video = document.getElementsByTagName('video')[0];
    video.onended = function(e) {
    	hideDiv();
    	document.write("<font color=\"white\">Work???</font>");
    }
</script>

I expected the text 'Work???' to be executed after the onended function carries out. However the video is not removed...
Thanks in anticipation to your answers..
Zugz

Hi, I started with the template on this site:
http://www.pupinc.com/videobox/

However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails.

HTML:
Code:

<div id="middle4">
    <div class="videobox" style="height: 360px; overflow-y: scroll;">
	<ul>
		<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
		<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
		<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
		<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
	        <li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
		<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
	        <li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>
			      
	</ul>
 </div>

</div>

JS:
Code:

// Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
	// Initialize object.
	initialize: function(index, item) {
		this.index = index;
		this.item = item;
		this.item.addClassName('videoboxjs');
		this.list = this.item.getElementsBySelector('ul')[0];
		// Create div.bigvideo and add it just before the ul.
		this.bigvideo = document.createElement('div');
		Element.addClassName(this.bigvideo, 'bigvideo');
		this.item.insertBefore(this.bigvideo, this.list);
		// Create array of videothumbs.
		this.thumbs = new Array;
		// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
		// have to break it apart.
		var links = this.item.getElementsBySelector('li');
		for (var i=0; i < links.length; i++) {
			this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
		}
		// Load up the first video.
		this.swap(0);
	},
	// Replace existing video with new one.
	swap: function(index) {
		// IE 6 won't show the video unless something else is in the box.
		// I chose to add a <br /> which I hide via CSS.
		this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
		// Deselect all the thumbnails.
		this.thumbs.invoke('deselect');
		// Select the current thumbnail.
		this.thumbs[index].select();
	}
};

// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
	// Initialize object.
	initialize: function(boxindex, index, link) {
		this.boxindex = boxindex;
		this.index = index;
		this.item = link;
		this.href = this.item.getAttribute('href');
		// Extract the v querystring value from the href. Youtube uses this
		// value for everything.
		this.videocode = this.href.toQueryParams().v;
		// Direct link to the video for use in the object/embed
		this.video = 'http://www.youtube.com/v/' + this.videocode;
		// Create thumbnail image and append it inside the list item
		var img = document.createElement('img');
		img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
		img.alt = this.item.innerHTML;
		img.title = this.item.innerHTML;
		this.item.innerHTML = "";
		this.item.appendChild(img);
		// Observe the click event.
		Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
	},
	swap: function(evt) {
		// Call the swap method of the parent videobox with the thumbnail
		// thumbnail index as a parameter.
		aVB[this.boxindex].swap(this.index);
		// Stop the event so the browser doesn't follow the link.
		if (evt) {
			Event.stop(evt);
		}
	},
	select: function() {
		this.item.addClassName('current');
	},
	deselect: function() {
		this.item.removeClassName('current');
	}
};

// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
	// Create array of videoboxes so you can have more than one on a page.
	var aVB = new Array;
	$$('div.videobox').each ( function(videobox, index) {
		aVB[index] = new VideoBox(index, videobox);
	});
}

Hi all,
How can I insert ads on html5 video tag before the main video plays?
Now, I need make a sample allow:
- play first advertisment video
- play second ad video
- play main video
after 10 mins (half of duration) . pause main video . and play ad video.
after that. continue the main video playback.

Can you help me please?
Thank you very much!

Hello everyone, after a few days of looking i give up i just don't know what to look for or how to do it.

on this website "http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding there is a section called How to make a video select list. I have been able to replicate and modify it to my liking how ever i have one issue. i can't make my videos fullscreen. The videos have and give the option for full screen but the fullscreen doesn't work.

i prefer this kind of code because it allows my webpage to select a video without changing the webpage and play it, i find it much more smoother then then multiple embedded videos in tabs (i don't even know what to call it so thats what i call it)

just incase the website doesnt work or something i will post the script

first part<div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div>

then

<div id='selectDemo1' style='display: none'>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="350">
</embed>
</object>
</div>

<div id='selectDemo2' style='display: none'>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="350">
</embed>
</object>
</div>

then
<A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A><BR>
<A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute </A><BR>

and finally<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>

i'm not sure the exact functions or how to write this kinda stuff from scratch so if you have any helpfull additions or suggestions please let me know.

the following script opens a video and plays the video
is there anyway to have it list all the flv files in a folder and make it play the video onclick
something like a web photo album but for video's all with the same extension
the file name that would need to be replaced is detecting.flv

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- A minimal Flowplayer setup to get you started -->
  

	<!-- 
		include flowplayer JavaScript file that does  
		Flash embedding and provides the Flowplayer API.
	-->
	<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
	
	<!-- some minimal styling, can be removed -->
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<!-- page title -->
	<title>detecting finds</title>

</head><body>

	<div id="page">
		
		<p style="text-align: center">Franks website</p>
		
		<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
		<a  
			 href="http://franks.com/movies/detecting.flv"
			 style="display:block;width:520px;height:330px"  
			 id="player"> 
		</a> 
	
		<!-- this will install flowplayer inside previous A- tag. -->
		<script>
			flowplayer("player", "http://franks.com/movies/flowplayer-3.2.7.swf");
		</script>
	
	</div>
	
	
</body></html>

solve

Hello guys,

I spent a lot of time searching for a good image/video gallery, but didn't find, what I'm looking for.

All I need is a code, that I can insert to my webpage. I need a thumbnail gallery (images or videos), that I can scroll by next/previous buttons a open it by clicking in new window. This is how LightBox and VideoLightBox work, but they don't have the next/previous buttons. I found js ImageScroller, but it can't work together with VideoLightBox...

Is there anybody solving this problem? Well I found this page
http://codecanyon.net/item/jquery-ho...preview/112734
but I need it even for videos. If there is a solution for both images and videos...

Thanks for help, DveD

I'm creating an interface. RIght now I have an introduction video in a div that is hidden when you click off of it. What I want to happen is for the div to automatically hide when the video is finished playing, so the user doesn't have to click on anything. I've tried multiple things and the div still just stays there until you click off of it. Also, I'm looking to have the div only show up on the user's first visit. This is an urgent matter. Any help is appreciated.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	
	<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
	
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
	
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	
	<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	
	<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
	
	
<script type="text/javascript">
	$(document).ready(function(){

// checks for first-time visitors
       var firstvisit=getCookie("firstvisit");
       if (firstvisit==null || firstvisit==""){
                 // here is where you would show the video container and start playing it
                $('#mydiv').show();
                document.getElementById('myvideoelement').play();
                setCookie("firstvisit","true",365);
       } else {
                $('#mydiv').hide();
       }
	
	* * * *// check when video is finished, then hide mydiv
* * * *$("#myvideoelement").bind("ended", function() {
* * * * * $('#mydiv').hide();
	
* * * *$(".fancybox").fancybox();


* * * *});
});
	
	
   

</script>


script>
function getCookie(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
*{
*x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
*y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
*x=x.replace(/^\s+|\s+$/g,"");
*if (x==c_name)
* {
* return unescape(y);
* }
*}
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>



 <script type="text/javascript"> 
document.onclick=check; 
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 
var obj = document.getElementById('mydiv'); 
if(target!=obj){obj.style.display='none'} 
} 
</script>

So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video.

What could I possibly be doing wrong?

Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4
JS: http://xonicgames.com/video/?i=6

Thanks