JavaScript - How Can I Make A Video Play In A Different Location

I'm using VS2008Pro with Master pages. On a child page, I have a modalPopupExtender that calls a panel with an embedded Google video. Everything works great - the popup appears with the video, background greyed. But, when I close the panel, the audio keeps playing in IE 7 & 8. Netscape is fine. I went and tried what Google recommended, but it still continues. Any ideas?

Code:

'//In child page header 

  <script src="../swfObject/swfobject.js" type="text/javascript"></script>
  <script type="text/javascript"> 
     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "myytplayer", name: "myytplayer" };
     swfobject.embedSWF("http://www.youtube.com/e/GtHDrLngXlc?enablejsapi=1&playerapiid=myytplayer", "myytplayer", "425", "344", "8", null, null, params, atts); 

    function stopVideo() {
      var playerObj = document.getElementById("myytplayer");
      if (playerObj) {
        playerObj.stopVideo();
        playerObj.clearVideo();
      }
    } 
  </script>


'//in child page html
        <asp:ImageButton ID="imgBtnAmanda" runat="server" ImageAlign="Middle" ImageUrl="~/media/quality/devMedAmanda.jpg" /> 
        <asp:Panel ID="pnlAmanda" runat="server" CssClass="modalPopup"> 
        <asp:ImageButton ID="imgBtnCloseAmanda" runat="server" ImageUrl="~/images/icon-x.gif" ImageAlign="Right" /><br /><p align="center"> 


        <div id="myytplayer" name="myytplayer" style="width:425px; height:344px;">You need Flash player 8+ and JavaScript enabled to view this video.</div> 
        <br /><br />Amanda Levesque's performance of "To Dream the Impossible Dream"</p></asp:Panel> 
        <ajaxToolkit:ModalPopupExtender ID="modalAmanda" runat="server" TargetControlID="imgBtnAmanda" PopupControlID="pnlAmanda" BackgroundCssClass="modalBackground" 
        CancelControlID="imgBtnCloseAmanda" OkControlID="imgBtnCloseAmanda" OnOkScript="stopVideo;" onCancelScript="stopVideo;" /> 
        </p>

Hi all, I need Media player to stream and play video in javascript...any help or working link will work.

My requirement is I have .wmv files but when i embed them in html pages first it gets downloaded and then it gets played.

I need them playing while they are getting downloaded.

please help, i have tried lots of codes but got no success

Hi gents,

I am trying to figure out, how to play a video file saved on the server, displayed as a hyperlink from the file manager created in JavaScript? The outcome should be following: When a file name (video.avi) clicked in JavaScript file manager, the server will open a page with the embed Windows Media Player (player.php) and it will start playing the clicked video file? Any suggestions?

Code of the JavaScript file manager
Code:

<?
/*


Start Directory - To list the files contained within the current 
directory enter '.', otherwise enter the path to the directory 
you wish to list. The path must be relative to the current 
directory.
*/
$startdir = '.';

/*
Show Thumbnails? - Set to true if you wish to use the 
scripts auto-thumbnail generation capabilities.
This requires that GD2 is installed.
*/
$showthumbnails = true; 

/*
Show Directories - Do you want to make subdirectories available?
If not set this to false
*/
$showdirs = true;

/* 
Force downloads - Do you want to force people to download the files
rather than viewing them in their browser?
*/
$forcedownloads = false;

/*
Hide Files - If you wish to hide certain files or directories 
then enter their details here. The values entered are matched
against the file/directory names. If any part of the name 
matches what is entered below then it is now shown.
*/
$hide = array(
				'dlf',
				'index.php',
				'Thumbs',
				'.htaccess',
				'.htpasswd'
			);
			 
/* 
Show index files - if an index file is found in a directory
to you want to display that rather than the listing output 
from this script?
*/			
$displayindex = false;

/*
Allow uploads? - If enabled users will be able to upload 
files to any viewable directory. You should really only enable
this if the area this script is in is already password protected.
*/
$allowuploads = false;

/*
Overwrite files - If a user uploads a file with the same
name as an existing file do you want the existing file
to be overwritten?
*/
$overwrite = false;

/*
Index files - The follow array contains all the index files
that will be used if $displayindex (above) is set to true.
Feel free to add, delete or alter these
*/

$indexfiles = array (
				'index.html',
				'index.htm',
				'default.htm',
				'default.html'
			);
			
/*
File Icons - If you want to add your own special file icons use 
this section below. Each entry relates to the extension of the 
given file, in the form <extension> => <filename>. 
These files must be located within the dlf directory.
*/
$filetypes = array (
				'png' => 'jpg.gif',
				'jpeg' => 'jpg.gif',
				'bmp' => 'jpg.gif',
				'jpg' => 'jpg.gif', 
				'gif' => 'gif.gif',
				'zip' => 'archive.png',
				'rar' => 'archive.png',
				'exe' => 'exe.gif',
				'setup' => 'setup.gif',
				'txt' => 'text.png',
				'htm' => 'html.gif',
				'html' => 'html.gif',
				'fla' => 'fla.gif',
				'swf' => 'swf.gif',
				'xls' => 'xls.gif',
				'doc' => 'doc.gif',
				'sig' => 'sig.gif',
				'fh10' => 'fh10.gif',
				'pdf' => 'pdf.gif',
				'psd' => 'psd.gif',
				'rm' => 'real.gif',
				'mpg' => 'video.gif',
				'mpeg' => 'video.gif',
				'mov' => 'video2.gif',
				'avi' => 'video.gif',
				'eps' => 'eps.gif',
				'gz' => 'archive.png',
				'asc' => 'sig.gif',
			);
			
/*
That's it! You are now ready to upload this script to the server.

Only edit what is below this line if you are sure that you know what you
are doing!
*/
error_reporting(0);
if(!function_exists('imagecreatetruecolor')) $showthumbnails = false;
$leadon = $startdir;
if($leadon=='.') $leadon = '';
if((substr($leadon, -1, 1)!='/') && $leadon!='') $leadon = $leadon . '/';
$startdir = $leadon;

if($_GET['dir']) {
	//check this is okay.
	
	if(substr($_GET['dir'], -1, 1)!='/') {
		$_GET['dir'] = $_GET['dir'] . '/';
	}
	
	$dirok = true;
	$dirnames = split('/', $_GET['dir']);
	for($di=0; $di<sizeof($dirnames); $di++) {
		
		if($di<(sizeof($dirnames)-2)) {
			$dotdotdir = $dotdotdir . $dirnames[$di] . '/';
		}
		
		if($dirnames[$di] == '..') {
			$dirok = false;
		}
	}
	
	if(substr($_GET['dir'], 0, 1)=='/') {
		$dirok = false;
	}
	
	if($dirok) {
		 $leadon = $leadon . $_GET['dir'];
	}
}

if($_GET['download'] && $forcedownloads) {
	$file = str_replace('/', '', $_GET['download']);
	$file = str_replace('..', '', $file);

	if(file_exists($leadon . $file)) {
		header("Content-type: application/x-download");
		header("Content-Length: ".filesize($leadon . $file)); 
		header('Content-Disposition: attachment; filename="'.$file.'"');
		readfile($leadon . $file);
		die();
	}
}

if($allowuploads && $_FILES['file']) {
	$upload = true;
	if(!$overwrite) {
		if(file_exists($leadon.$_FILES['file']['name'])) {
			$upload = false;
		}
	}
	
	if($upload) {
		move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']);
	}
}

$opendir = $leadon;
if(!$leadon) $opendir = '.';
if(!file_exists($opendir)) {
	$opendir = '.';
	$leadon = $startdir;
}

clearstatcache();
if ($handle = opendir($opendir)) {
	while (false !== ($file = readdir($handle))) { 
		//first see if this file is required in the listing
		if ($file == "." || $file == "..")  continue;
		$discard = false;
		for($hi=0;$hi<sizeof($hide);$hi++) {
			if(strpos($file, $hide[$hi])!==false) {
				$discard = true;
			}
		}
		
		if($discard) continue;
		if (@filetype($leadon.$file) == "dir") {
			if(!$showdirs) continue;
		
			$n++;
			if($_GET['sort']=="date") {
				$key = @filemtime($leadon.$file) . ".$n";
			}
			else {
				$key = $n;
			}
			$dirs[$key] = $file . "/";
		}
		else {
			$n++;
			if($_GET['sort']=="date") {
				$key = @filemtime($leadon.$file) . ".$n";
			}
			elseif($_GET['sort']=="size") {
				$key = @filesize($leadon.$file) . ".$n";
			}
			else {
				$key = $n;
			}
			$files[$key] = $file;
			
			if($displayindex) {
				if(in_array(strtolower($file), $indexfiles)) {
					header("Location: $file");
					die();
				}
			}
		}
	}
	closedir($handle); 
}

//sort our files
if($_GET['sort']=="date") {
	@ksort($dirs, SORT_NUMERIC);
	@ksort($files, SORT_NUMERIC);
}
elseif($_GET['sort']=="size") {
	@natcasesort($dirs); 
	@ksort($files, SORT_NUMERIC);
}
else {
	@natcasesort($dirs); 
	@natcasesort($files);
}

//order correctly
if($_GET['order']=="desc" && $_GET['sort']!="size") {$dirs = @array_reverse($dirs);}
if($_GET['order']=="desc") {$files = @array_reverse($files);}
$dirs = @array_values($dirs); $files = @array_values($files);


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></title>
<link rel="stylesheet" type="text/css" href="dlf/styles.css" />
<?
if($showthumbnails) {
?>
<script language="javascript" type="text/javascript">
<!--
function o(n, i) {
	document.images['thumb'+n].src = 'dlf/i.php?f='+i;

}

function f(n) {
	document.images['thumb'+n].src = 'dlf/trans.gif';
}
//-->
</script>
<?
}
?>
</head>
<body>
<div id="container">
  <h1>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></h1>
  <div id="breadcrumbs"> <a href="<?=$_SERVER['PHP_SELF'];?>">home</a> 
  <?
 	 $breadcrumbs = split('/', $leadon);
  	if(($bsize = sizeof($breadcrumbs))>0) {
  		$sofar = '';
  		for($bi=0;$bi<($bsize-1);$bi++) {
			$sofar = $sofar . $breadcrumbs[$bi] . '/';
			echo ' &gt; <a href="'.$_SERVER['PHP_SELF'].'?dir='.urlencode($sofar).'">'.$breadcrumbs[$bi].'</a>';
		}
  	}
  
	$baseurl = $_SERVER['PHP_SELF'] . '?dir='.$_GET['dir'] . '&amp;';
	$fileurl = 'sort=name&amp;order=asc';
	$sizeurl = 'sort=size&amp;order=asc';
	$dateurl = 'sort=date&amp;order=asc';
	
	switch ($_GET['sort']) {
		case 'name':
			if($_GET['order']=='asc') $fileurl = 'sort=name&amp;order=desc';
			break;
		case 'size':
			if($_GET['order']=='asc') $sizeurl = 'sort=size&amp;order=desc';
			break;
			
		case 'date':
			if($_GET['order']=='asc') $dateurl = 'sort=date&amp;order=desc';
			break;  
		default:
			$fileurl = 'sort=name&amp;order=desc';
			break;
	}
  ?>
  </div>
  <div id="listingcontainer">
    <div id="listingheader"> 
	<div id="headerfile"><a href="<?=$baseurl . $fileurl;?>">File</a></div>
	<div id="headersize"><a href="<?=$baseurl . $sizeurl;?>">Size</a></div>
	<div id="headermodified"><a href="<?=$baseurl . $dateurl;?>">Last Modified</a></div>
	</div>
    <div id="listing">
	<?
	$class = 'b';
	if($dirok) {
	?>
	<div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($dotdotdir);?>" class="<?=$class;?>"><img src="dlf/dirup.png" alt="Folder" /><strong>..</strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($dotdotdir));?></a></div>
	<?
		if($class=='b') $class='w';
		else $class = 'b';
	}
	$arsize = sizeof($dirs);
	for($i=0;$i<$arsize;$i++) {
	?>
	<div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($leadon.$dirs[$i]);?>" class="<?=$class;?>"><img src="dlf/folder.png" alt="<?=$dirs[$i];?>" /><strong><?=$dirs[$i];?></strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$dirs[$i]));?></a></div>
	<?
		if($class=='b') $class='w';
		else $class = 'b';	
	}
	
	$arsize = sizeof($files);
	for($i=0;$i<$arsize;$i++) {
		$icon = 'unknown.png';
		$ext = strtolower(substr($files[$i], strrpos($files[$i], '.')+1));
		$supportedimages = array('gif', 'png', 'jpeg', 'jpg');
		$thumb = '';
		
		if($showthumbnails && in_array($ext, $supportedimages)) {
			$thumb = '<span><img src="dlf/trans.gif" alt="'.$files[$i].'" name="thumb'.$i.'" /></span>';
			$thumb2 = ' onmouseover="o('.$i.', \''.urlencode($leadon . $files[$i]).'\');" onmouseout="f('.$i.');"';
			
		}
		
		if($filetypes[$ext]) {
			$icon = $filetypes[$ext];
		}
		
		$filename = $files[$i];
		if(strlen($filename)>43) {
			$filename = substr($files[$i], 0, 40) . '...';
		}
		
		$fileurl = $leadon . $files[$i];
		if($forcedownloads) {
			$fileurl = $_SESSION['PHP_SELF'] . '?dir=' . urlencode($leadon) . '&download=' . urlencode($files[$i]);
		}

	?>
	<div><a href="<?=$fileurl;?>" class="<?=$class;?>"<?=$thumb2;?>><img src="dlf/<?=$icon;?>" alt="<?=$files[$i];?>" /><strong><?=$filename;?></strong> <em><?=round(filesize($leadon.$files[$i])/1024);?>KB</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$files[$i]));?><?=$thumb;?></a></div>
	<?
		if($class=='b') $class='w';
		else $class = 'b';	
	}	
	?></div>
	<?
	if($allowuploads) {
		$phpallowuploads = (bool) ini_get('file_uploads');		
		$phpmaxsize = ini_get('upload_max_filesize');
		$phpmaxsize = trim($phpmaxsize);
		$last = strtolower($phpmaxsize{strlen($phpmaxsize)-1});
		switch($last) {
			case 'g':
				$phpmaxsize *= 1024;
			case 'm':
				$phpmaxsize *= 1024;
		}
	
	?>
	<div id="upload">
		<div id="uploadtitle"><strong>File Upload</strong> (Max Filesize: <?=$phpmaxsize;?>KB)</div>
		<div id="uploadcontent">
			<?
			if($phpallowuploads) {
			?>
			<form method="post" action="<?=$_SERVER['PHP_SELF'];?>?dir=<?=urlencode($leadon);?>" enctype="multipart/form-data">
			<input type="file" name="file" /> <input type="submit" value="Upload" />
			</form>
			<?
			}
			else {
			?>
			File uploads are disabled in your php.ini file. Please enable them.
			<?
			}
			?>
		</div>
		
	</div>
	<?
	}
	?>
  </div>
</div>
<div></div>
</body>
</html>

Code of the PHP page with the embed Windows Media Player (player.php)
Code:

<html>
<head>
<title>Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
</head>
<OBJECT id=mediaPlayer 
                                classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 
                                width=400 height=300 
                                type=application/x-oleobject VIEWASTEXT><PARAM NAME="AutoSize" VALUE="1"><PARAM NAME="DisplaySize" VALUE="2"><PARAM NAME="url" VALUE=""><PARAM NAME="autoStart" VALUE="true"><PARAM NAME="uiMode" VALUE="mini">
                                																																								
                                								<embed id="mediaPlayer" 
                                name="mediaPlayer" width="400" height="300" 
                                type="application/x-mplayer2" 
                                pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
                                src="video.avi" 
                                autostart="true" showstatusbar="0" 
                                showcontrols="1" autosize="1" 
                                displaysize="4"></embed>
</OBJECT>
</body>
</html>

Please note that video.avi in player.php will be variable (name of the video file chosen by user and clicked).

Many thanks for help.
ZizaX.

I am not sure if I am in the right section. I tried to search this but couldn't find what I needed. I am very limited on my javascript knowledge. I need a video player that functions almost exactly like the one in this example:
http://www.popcap.com/games/bookworm...L_1_8_19_08_en {the links that toggle between the video and flash slideshow depending on which is clicked. The player showing the videos and screenshots for the game}.

I tried looking at the source to understand the functions, but my code is not working. I know the player is calling some javascript, but I'm not sure I understand it all. Can someone explain to me the basic functioning of this player as shown? I would very much appreciate it.

I have looked all over for an answer to this, but haven't found a definite way to do it yet.

I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this.

The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play.

Any help would be greatly appreciated,

Thanks!

My website is: ERBoH.com
I have no experience with JS, just general knowledge of html/css.
I had someone else write the site for me. They didn't know how to do this and pretty much just stopped talking to me...

On my site, I have a video carousel (4 video thumbnails in a row, you press the > arrow, and it shows the next 4 video thumbnails, you click 1 video thumbnail, and it shows you the video above the carousel).

The problem is, when you click on one of the thumbnails, it reloads the page, and the video carousel goes back to the beginning. So if you clicked the > arrow 3 times (ur on the 3rd set of thumbnails), then it brings you back to the 1st set.

This is pretty annoying, especially if your planning on watching each video.

My question is, is it possible to make some type of cookie or something to remember which set of thumbnails you were on in the carousel?

So that, if your on the 3rd set, and click a video, instead of resetting to the 1st set, it keeps you on the 3rd set.

If it is possible... how hard would it be to do? Is it something where I could just copy/paste a string of code, or would this be a huge project?

Thanks for the advice.

Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not.

I know how to make the button, that is simple.

Sorry if this is actually easy, I am just learning how to script.

im using a mootools popup box to play a youtube video

its using javascript to control the "close" button.. and the close button uses this function

Code:

clickClose: function(){
		$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
		}).start(this.opacity,0); this.box.setStyle('display','none');
			this.isVisible = false;
		},

seeing as ow i have a playing video in the box...that simply wasnt enough..because the video would continue playing after the box is closed... (you would ehar audio)

so i modified the code by adding

Code:

this.box.setStyle('display','none');

this did the TRICK!!! ....in firefox.....sadly Internet Explorer is refusing to destroy that video upon click....

are there any ideas as to how i can destroy that video across all browsers when that button is clicked....i say "destroy" because im mad! lol

but i simply want the video to dissapear...off the screen and off the site with no mysterious audio afterwards.

Hello,

I want to run video at our website at a specified time only,like i might want my video to be played at 9.00a.m exactly . how can i do it using javascript.
Plz do revert back ASAP.

Thanks,
Revathi srikrishna

Code:

<script language="JavaScript" type="text/javascript">
function confirmDelete(url){
	
	var decision = confirm("Click OK to delete this post.");
		if(decision == true){
			window.location = url;
		}
}
</script>


<!--HTML LATER ON -->
<a onclick="confirmDelete('deletePost.php?id=17')" href=''><img src='delete.png' alt='' title='Delete this post' /></a>

I get absolutely nothing out of this. The confirm box pops up, but a the URL never changes when I click OK. I have no clue what's going wrong here. I'm using Google Chrome to test this out if that helps. Also does not work in Firefox.

Hi,

I'm using the following Javascript code to show a div layer depending on the URL

Code:

<script type="text/javascript">

if (location.href.match(/folder/)) {

document.getElementById("div-layer").style.display="block";

}

</script>

This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example:

http://www.domain.com/folder/sub-folder
http://www.domain.com/folder/sub-folder2

etc.

Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it?

Thank you in advance.

Hi,

I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded.

Thanks.

//Ana

What are the differences between results of these two.


Code:

window.location.hostname

or
Code:

document.location.hostname

this site plays music when you are there.

how do they do it?

I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript?

Thanks in advance.