JavaScript - Coding Swf Video

Hi all,
I need help with my problem. I have a plasma TV on which I invoking a lot of different short videos and I need at this TV also displayed a particular Web page. Video length is variable and depends on the actual length of the video currently playing and display the Web page is always 3 minutes.
I'd like to do in this format:
video1.html (3 minutes) -> pocasi.cz (5 minutes) -> video2.html (10 minutes) -> pocasi.cz (5 minutes)->...-> video30.html (1,5 minutes) -> pocasi.cz (5 minutes) -> video1.html (2,5 minutes )->... . Video's and web page in full screen without buttons.
Can someone please advise how the script should look like?
Thank you for your advice.

Is it possible to have a thumbnail of a video, then when you click it it expands so you can watch it without having to link to a different page? I'm thinking kind of like how people link youtube videos on facebook

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.

Hi
I am trying to create a pop up window to view a video stream but it's not working. When I click on the image the pop up window doesn't appear. I have an oscMax site (this is oscommerce with more bells and whistles).
This is my html code on my index page:
Code:

<td align="right" valign="middle"><a href="javascript:openNewWindow_01_01();"><img src="templates/my_custom/images/play_video.jpg" alt="Video Tutorial." border="0" width="50" height="20"></a></td>

And this is my attempt at the javascript. I inserted it into my stylesheet but I'm not sure if this is the correct place for it.
Code:

</style>
<script language="Javascript" type="text/javascript">
<!--
function openNewWindow_01_01() {
window.open('http://buildawebsite.ie/store/catalog/flix/01_01/01_01.html', 'name', 'height=400,resizable=yes,width=600');
}
</script>

Any suggestions would be a great help. Thanks.

Hello Friends,
I have an <img> Tab to play a video(of type .wmv). The image tag is as follows:
<img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838>

Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop.

How can I achieve the above requirement?

Thanks.

I am using joomla, and have a tabbed menu at the top, which has different articles embedded within. I have embedded a flash video inside each article. The problem is that if i play a video and then switch to the other tab (article) without pausing the video, the video keeps on playing. And if i try to play the video in the other article, then both videos start playing.

I want to stop the first video from playing as soon as I switch to the new tab. There are a lot of different files which are included in the page, so If I know where to place a particular code within the source of the final rendered webpage, I will be able to place it at the right point in a particular file.

thanks

the website link is: http://tinyurl.com/ycg4tcm

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);
	});
}

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.

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>

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>

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

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!

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

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 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 )