...

View Full Version : Accessing/loading avi files with Javascript



Running Bear
08-01-2006, 11:33 PM
Hi,

I'm trying to write a page which loads a selected movie clip into an instance of a media player. The first time the page loads the controls (play, pause etc.) are visible but when I load a clip from the table they are no longer visible

Can anyone see what the problem is?

<html>
<head>
<title></title>
<script type="text/javascript">
function loadClip(what,vWidth,vHeight){
var div=document.getElementById('divMovie');
var sTmp;
sTmp='<object width="'+vWidth+'" height="'+vHeight+'"';
sTmp +=' classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"';
sTmp +=' codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
sTmp +=' <param name="src" value="vids/'+what+'">';
sTmp +=' <param name="showControls" value="true">';
sTmp +=' <param name="controller" value="true">';
sTmp +=' <param name="autoplay" value="true">';
sTmp +=' <embed src="vids/'+what+'" width="'+vWidth+'" height="'+vHeight+'"';
sTmp +=' autoplay="true" controller="true"';
sTmp +=' showcontrols="true"';
sTmp +=' pluginspage="http://www.apple.com/quicktime/download/">';
sTmp +='</embed>';
sTmp +='</object>';

div.innerHTML=sTmp;
}

</script>
</head>

<body style="background:silver;">
<form name="myFrm" id="myFrm">
<div name="divMovie" id="divMovie" width="700" height="550">
<object width="640" height="500"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="vids/2005_03270029.AVI">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="vids/2005_03270029.AVI" width="460" height="500"
autoplay="false" controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</div>
<hr style="width:50%; text-align:left;">
<table border="1" cellpadding="0" cellspacing="0">
<tr style="background:gray;">
<th>Date</th>
<th>Desc</th>
<th>Size</th>
</tr>
<tr>
<td>27 Mar 2005</td>
<td><a href="#" onclick="loadClip('2005_03270029.AVI','640','490');">clip 1</a></td>
<td style="text-align:right;">3,427KB</td>
</tr>
<tr>
<td>07 May 2004</td>
<td><a href="#" onclick="loadClip('2004_05070025.AVI','640','490');">clip 2</a></td>
<td style="text-align:right;">37,699KB</td>
</tr>
</table>
</form>
</body>
</html>
Cheers Al

Running Bear
08-12-2006, 08:58 PM
Hi,

I've managed to get this working but with a popup window here is the complete code


<!doctype html Public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Embedded Video Example</title>

<script type="text/javascript">
<!-- // Begin Hide
var path="vids/";
function openindex(vWhat,vidW,vidH){
var winW=vidW+30;
var winH=vidH+96;
vidH=winH-80;
var winL=(screen.width-winW)/2;
var winT=(screen.height-winH)/2;
var sProps ='height='+winH+',';
sProps +='width='+winW+',';
sProps +='top='+winT+',';
sProps +='left='+winL+',';
sProps +='toolbar=no,';
sProps +='menubar=no,';
sProps +='scrollbars='+scroll+',';
sProps +='resizable=yes';

oWin=window.open('', 'newwin',sProps);
oWin.document.write('<title>My Embedded Video</title>\n');
oWin.document.write('<body style="background:000000;">\n');
oWin.document.write('<object id="player" width="'+vidW+'" height="'+vidH+'"\n');
oWin.document.write(' classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"\n');
oWin.document.write(' codebase="http://www.apple.com/qtactivex/qtplugin.cab">\n');
oWin.document.write(' <param name="src" value="'+path+vWhat+'">\n');
oWin.document.write(' <param name="controller" value="true">\n');
oWin.document.write(' <param name="autoplay" value="true">\n');
oWin.document.write(' <embed src="'+path+vWhat+'" width="'+vidW+'" height="'+vidH+'"\n');
oWin.document.write(' name="player"\n');
oWin.document.write(' autoplay="true" controller="true"\n');
oWin.document.write(' pluginspage="http://www.apple.com/quicktime/download/">\n')
oWin.document.write(' </embed>\n');
oWin.document.write('</object>\n');
oWin.document.write('</html>\n');
oWin.resizeTo(winW,winH);
oWin.moveTo(winL,winT);
oWin.document.focus();
oWin.document.close();
self.name="main";
}
// End Hide -->
</script>
</head>
<body style="background-color:ivory;">
<p>&nbsp;<p>
<h2 style="text-align:center;">Embeded Video</h2>
<table border="1" cellpadding="0" cellspacing="0">
<tr style="background:gray;">
<th>Date</th>
<th>Desc</th>
<th>Size</th>
</tr>
<tr>
<td>27 Mar 2005</td>
<td><a href="#" onclick="openindex('my.avi',320,240);">clip 1</a></td>
<td style="text-align:right;">3,427KB</td>
</tr>
<tr>
<td>07 May 2004</td>
<td><a href="#" onclick="openindex('cimg8055.avi',320,240);">clip 2</a></td>
<td style="text-align:right;">37,699KB</td>
</tr>
</table>
<p><b>Note:</b> Clips Open In a popup window, which is automatically resized, centered And brought To the front<p>
<p style="text-align:center; font-size:10pt;">
<a href="http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061" target="_new">original source</a>
</p>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum