Adding control buttons to a movie player window

OxygenThief · 05-18-2012, 03:58 AM

Hello.

My difficulty is in adding Flash control buttons (play, stop, rewind, et cetera) to a window for playing movies.

My initial code to create a window for the Shockwave/Flash player worked just fine:

Code:

<html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
 function playMovie(file){
  var moviePlayer=window.open('assets/'&&file&&'', '', 'height=480,width=640,resizable=0,status=0,locationbar=0,menubar=0,top=200,left=350');
  moviePlayer.document.write('<html><head><title>Movie Player</title>');
  moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
  moviePlayer.document.write('</head><body"><center>');
  moviePlayer.document.write('<object width="640" height="480">');
  moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
  moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
  moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480">');
  moviePlayer.document.write('</embed></object>');
  moviePlayer.document.write('</center></body></html>');
  moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>  
</html>

However, I then tried to add some of the material found on this webpage: http://www.permadi.com/tutorial/flashjscommand/

The resulting code:

Code:

<html>
<head>
<title>Movie Player Example</title>

<script type="text/javascript"><!--
 function playMovie(file){
  var moviePlayer=window.open('assets/'&&file&&'', '', 'height=510,width=640,resizable=1,status=0,locationbar=0,menubar=0,top=200,left=350');
  moviePlayer.document.write('<html><head><title>Movie Player</title>');
  moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
  moviePlayer.document.write('<script type="text/javascript">');
  moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
  moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
  moviePlayer.document.write('else{return document.getElementById(file);}}');
  moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
  moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
  moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
  moviePlayer.document.write('</script>');
  moviePlayer.document.write('</head><body><center>');
  moviePlayer.document.write('<object width="640" height="480">');
  moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
  moviePlayer.document.write('<param name="ShowControls" value="1">');
  moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
  moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480" pluginspage="http://www.macromedia.com/go/getflashplayer">');
  moviePlayer.document.write('</embed></object>');
  moviePlayer.document.write('<a href="javascript:movieControlPlay();"><img src="play.png" alt="Play" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlStop();"><img src="stop.png" alt="Stop" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlRewind();"><img src="rewind.png" alt="Rewind" height="50" width="50" border="0" /></a>');
  moviePlayer.document.write('</center></body></html>');
  moviePlayer.document.close();
}
//--></script>

</head>
<body>
 <p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>  
</html>

Where the problem is:

Code:

  moviePlayer.document.write('<script type="text/javascript">');
  moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
  moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
  moviePlayer.document.write('else{return document.getElementById(file);}}');
  moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
  moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
  moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
  moviePlayer.document.write('</script>');

And:

Code:

<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>

So it's just the sections dealing with the buttons and handling the buttons in the generated page header. Any help would be appreciated. Thanks.

OxygenThief · 05-18-2012, 04:03 AM

Yes, I am new to this.

EpicWebDesign · 05-18-2012, 05:46 PM

I tweaked your script a bit and it appears to work now. One of the problems you had is that you were calling the actual movie file (assets/mymovie.swf) in each function rather than the name you assigned to it (movie). Also, if you viewed the source code of the movie window, the full script for the buttons was not being written so it failed.

See if this works for you:

Code:

<html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
 function playMovie(file){
  var moviePlayer=window.open('assets/'&&file&&'', '', 'height=510,width=640,resizable=1,status=0,locationbar=0,menubar=0,top=200,left=350');
  moviePlayer.document.write('<html><head><title>Movie Player</title>');
  moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
  moviePlayer.document.write('<script type="text/javascript">');
  moviePlayer.document.write('function getFlashMovieObject(movieName) {  if (window.document[movieName]) {return window.document[movieName];}');
  moviePlayer.document.write('if (navigator.appName.indexOf("Microsoft Internet")==-1){if (document.embeds && document.embeds[movieName])return document.embeds[movieName];}');
  moviePlayer.document.write('else {return document.getElementById(movieName);}}');
  moviePlayer.document.write('function movieControlPlay() {var flashMovie=getFlashMovieObject("myMovie"); flashMovie.Play();}');
  moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("myMovie"); flashMovie.StopPlay();}');
  moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("myMovie"); flashMovie.Rewind();}');
  moviePlayer.document.write('</script>');
  moviePlayer.document.write('</head><body><center>');
  moviePlayer.document.write('<object width="640" height="480">');
  moviePlayer.document.write('<param value="assets/'+file+'"></param>');
  moviePlayer.document.write('<param name="ShowControls" value="1">');
  moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
  moviePlayer.document.write('<embed name="myMovie" src="assets/'+file+'"  type="application/x-shockwave-flash" wmode="transparent" width="640" height="480" 
pluginspage="http://www.macromedia.com/go/getflashplayer">');
  moviePlayer.document.write('</embed></object>');
  moviePlayer.document.write('<a href="javascript:movieControlPlay();"><img src="play.png" alt="Play" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlStop();"><img src="stop.png" alt="Stop" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlRewind();"><img src="rewind.png" alt="Rewind" height="50" width="50" border="0" /></a>');
  moviePlayer.document.write('</center></body></html>');
  moviePlayer.document.close();
}
//--></script>

</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf'); ">Create movie player window.</a></p>
</body>  
</html>

OxygenThief · 05-21-2012, 02:48 AM

Thank you for that help. Very useful.