Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder Running Bear's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    104
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Accessing/loading avi files with Javascript

    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?
    Code:
    <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

  • #2
    Regular Coder Running Bear's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    104
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

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

    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>
    Last edited by Running Bear; 08-12-2006 at 08:01 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •