Custom Windows Media playback controls? at DVinfo.net

Travis Maynard · October 7th, 2005, 09:52 PM

I recently redid my website and I was trying to use pictures as controls to stop, play, pause, etc. my playback in an embedded Windows Media or Quicktime file.

Since I am using pictures, I need the script to work only with these pictures (No Flash). For instance, when the "play" picture is clicked, I want it to begin playing the embedded video. When I click stop or pause I would want it to do it's action aswell.

I have spotted several javascript scripts and I cannot seem to figure out how to assign it to a certain picture.

Anyone have any experience in this area?

Thanks for your time!

Giroud Francois · October 8th, 2005, 07:38 AM

something i wrote, so fell free to copy it

http://www.imagidee.ch/image2/pagevideo/main.asp

Dan Euritt · October 8th, 2005, 12:48 PM

that's a nice interface Giroud... i went to copy it, but there is next to nothing in the "view source" window... i guess that the .asp scripts are not visible, sorta like external java files.

Giroud Francois · October 8th, 2005, 02:05 PM

because frames, depends where you right-click.
if you right-click next the video vindow, you will see the javascript code.
never use the top menu for viewing source, it always return the code of the parent frame (usually almost nothing)
Sometimes frame are so tightly wrapped around an object (flash, mediaplayer, java applet) that you have to carefully right-click on the border of the object to grab any pixel that belongs to the frame and not to the object). this is for the mediaplayer frame, you need to click exactly into the white border to view source.
the code does not include stop/play button but using the code for pause/mute, you can easily develop, because the pause is a flip between a Pause and Play function.
The files do not need to be asp files (can be htm only) if you are not doing any asp processing.
currently the structure is a bit complex, but there are 3 frames.
the top one for logo
the left one for scrolling picture (with an additional iframe for pictures)
the right one for video (with an additional iframe to play video).
this is due to the will to have minimal redraw/reload when selecting video or when jumping from a page to another in the web site.
you can go for simpler structure but take care that the java script include some frame name inside.

the main source (not visible as just calling for other frames)

<html>
<frameset framespacing="0" border="0" rows="75,*" frameborder="0">
<frame name="topmenu" scrolling="no" noresize target="contents" src="topmenu.asp" marginwidth="0" marginheight="0">
<frameset cols="145,100%">
<frame name="choosevideo" src="choosevideo.asp" marginwidth="0" marginheight="0" scrolling="no" noresize >
<frame name="showvideo" src="showvideo.asp" marginwidth="0" marginheight="0" scrolling="no" >
</frameset>
<noframes>
<body topmargin="0" leftmargin="0">

<p>This page uses frames, but your browser doesn't support them.</p>

</body>
</noframes>
</frameset>
</html>

then top frame just for logo (topmenu.asp)

<html>
<body bgcolor=#B496C5>
<table border=0 cellpadding=8><tr><td></td></tr><tr><td width=116></td><td><IMG SRC=logo1.gif BORDER=0></td></tr></table>
</body>
</html>

the left frame just for the up/down button and calling the iframe for scrolling pictures (choosevideo.asp)

<html><body bgcolor=#56404C>
<iframe id="datamain" src="choices.asp" width=120 height=280 marginwidth=0 marginheight=0 hspace=10 vspace=30 frameborder=0 scrolling=no></iframe>
<p>
<layer visibility=hide>
<center>
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><img src=up.gif border=0></a>       <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0"><img src=down.gif border=0></a>

</layer>
</body></html>

the iframe (choices.asp)
basically always the same code for each link, just changing the video file.

<html><body bgcolor=#56404C alink=#FFFFFF link=#FFFFFF vlink=#FFFFFF>
<p style="margin-top: 1; margin-bottom: 1">
<font face=verdana size=0>
<br>
<a title="My title 1" target=bigvideo href="bigvideo.asp?movie=mymovie1.wmv">
<img border="0" src="apercu/mythumbnail1.jpg"></a></font></p>
<p style="margin-top: 1; margin-bottom: 1">
<font face=verdana size=0>
<br>
<p style="margin-top: 1; margin-bottom: 1">
<font face=verdana size=0>
<br>
<a title="My title 2" target=bigvideo href="bigvideo.asp?movie=mymovie2.wmv">
<img border="0" src="apercu/mythumbnail2.jpg"></a></font></p>
<p style="margin-top: 1; margin-bottom: 1">
<font face=verdana size=0>
<br>

<br> 


<script language="JavaScript1.2">

//Scrollable content III- By http://www.dynamicdrive.com

var speed, currentpos=curpos1=0,alt=1,curpos2=-1

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp

window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>
</p>
</body></html>

the big frame to display the mute/pause button (showvideo.asp)

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
var paused = 0;
var muted = 0;

function ini() {
paused = 0;
muted = 0;
}

function pausevideo() {
var a = document.getElementById("PAUSEBUT");

if (paused == 0) {
a.src = "pauseon.gif";
bigvideo.MediaPlayer.controls.pause()
paused = -1;
}
else {
a.src = "pauseoff.gif";
bigvideo.MediaPlayer.controls.play()
paused = 0;
}
}

function mutevideo() {
var b = document.getElementById("MUTEBUT");
if (muted == 0) {
b.src = "muteon.gif";
bigvideo.MediaPlayer.settings.mute=-1;
muted=-1
}
else {
b.src = "muteoff.gif";
bigvideo.MediaPlayer.settings.mute=0;
muted=0
}
}

</SCRIPT>

<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;

}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body background=backmain.gif onload="ini();">
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<b><font color="#FFFFFF"><a target="_top" href="../index.asp"><font color="#FFFFFF">Home</font></a></font></b><p>
<iframe name=bigvideo width=374 height=272 frameborder=0 marginwidth=0 marginheight=0 src=bigvideo.asp ></iframe>

<p> </p>
<INPUT type=image src=pauseoff.gif name=PAUSEBUT onclick="javascript:pausevideo()" ALT="Pause">   
<INPUT type=image src=muteoff.gif name=MUTEBUT onclick="javascript:mutevideo()" ALT="Mute">

</div>
</div>
<div id="footer">
<div id="contentwrap">
<div id="content">
 </div>

</div>

<div id="footer">
<strong><font face="verdana" color="#FFFFFF" size="0">Jean-Claude Brussino 28,
ch d'Archamps 1257 Croix-de-Rozon  tél.+Fax +4122 7 711711  mobile +4179 476
10 63</div>
</font></strong> </div>
</body>

Giroud Francois · October 8th, 2005, 02:27 PM

due to forum limitation i had to put this in a new reply.
the last frame (where video plays)

the bigvideo.asp to display video

<html>
<body bgcolor=#FFFFFF style="overflow:hidden"><center>
<table border=0 align=center><tr><td background=wait.gif>

<SCRIPT LANGUAGE="VBScript">
On Error Resume Next
lngMP70 = IsObject(CreateObject("WMPlayer.OCX"))
document.write "<OBJECT ID=MediaPlayer "
document.write "STANDBY=""Loading Microsoft Windows Media Player components..."" "
document.write " WIDTH=368 HEIGHT=266 "
If (lngMP70) Then ' Windows Media Player 7 Code
document.write " CLASSID=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6>"
document.write "<PARAM NAME=""url"" "
Else ' Windows Media Player 6.4 Code
document.write " CLASSID=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 "
document.write "CODEBASE=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
document.write "type=""application/x-oleobject"">"
document.write "<PARAM NAME=""FileName"" "
End If
</SCRIPT>

VALUE="mms://194.38.169.35/imagidee/">
<param name="uiMode" value="invisible">
<PARAM NAME="windowlessVideo" Value="0">
<PARAM NAME="animationatStart" VALUE="0">
<PARAM NAME="TransparentAtStart" Value="-1">
<PARAM NAME="AutoStart" VALUE="-1">
<PARAM NAME="EnableContextMenu" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowControls" VALUE="0">
<PARAM NAME="ShowStatusBar" VALUE="0">
<PARAM NAME="PlayCount" VALUE="0">
<param name="AutoSize" value="-1">

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/" width="368" height="266"
src="mms://194.38.169.35/imagidee/" filename="mms://194.38.169.35/imagidee/"
autostart="True" showcontrols="False" showstatusbar="False" showdisplay="False" autorewind="True">
</embed>
</OBJECT>
</td></tr></table>

<SCRIPT LANGUAGE="JavaScript">
function showvideo() {
MediaPlayer.uiMode = "none";
}

setTimeout("showvideo()", 11000);

</SCRIPT>
</body></html>

Giroud Francois · October 8th, 2005, 02:52 PM

there is a special feature i put that can be improved.
when you click on a thumbnail, there is a delay of 10 sec before lauching the video and the mediaplayer is hidden behind a picture.(the car)
after 10 sec, the image is removed and the mediaplayer is visible.
these 10 sec allow the stream to start playing.
sometime it is too short and you see a black video for few sec. and sometime it is too long and you can hear the video starting to play behind the picture.
There are some ways to know when the mediaplayer really start to play, so you could replace this fixed 10 sec delays by a dynamic delay that really depends of when video starts. I never take the time to do this but it should be really easy.
My opinion is that Pause and Mute is enough for a clean interface, you rarely use the stop/play/FF or rewind function (specially for web video).
a sliding bar for volume would be the only thing that could be still necessary.
i started to code for it, but never implement.

Travis Maynard · October 8th, 2005, 09:09 PM

Thanks Giroud!

This should help out a lot!

October 7th, 2005, 09:52 PM	#1
Travis Maynard Regular Crew Join Date: Dec 2004 Location: Chapmanville, USA Posts: 138	Custom Windows Media playback controls? I recently redid my website and I was trying to use pictures as controls to stop, play, pause, etc. my playback in an embedded Windows Media or Quicktime file. Since I am using pictures, I need the script to work only with these pictures (No Flash). For instance, when the "play" picture is clicked, I want it to begin playing the embedded video. When I click stop or pause I would want it to do it's action aswell. I have spotted several javascript scripts and I cannot seem to figure out how to assign it to a certain picture. Anyone have any experience in this area? Thanks for your time!

October 8th, 2005, 02:05 PM	#4
Giroud Francois Inner Circle Join Date: Feb 2004 Location: switzerland Posts: 2,133	because frames, depends where you right-click. if you right-click next the video vindow, you will see the javascript code. never use the top menu for viewing source, it always return the code of the parent frame (usually almost nothing) Sometimes frame are so tightly wrapped around an object (flash, mediaplayer, java applet) that you have to carefully right-click on the border of the object to grab any pixel that belongs to the frame and not to the object). this is for the mediaplayer frame, you need to click exactly into the white border to view source. the code does not include stop/play button but using the code for pause/mute, you can easily develop, because the pause is a flip between a Pause and Play function. The files do not need to be asp files (can be htm only) if you are not doing any asp processing. currently the structure is a bit complex, but there are 3 frames. the top one for logo the left one for scrolling picture (with an additional iframe for pictures) the right one for video (with an additional iframe to play video). this is due to the will to have minimal redraw/reload when selecting video or when jumping from a page to another in the web site. you can go for simpler structure but take care that the java script include some frame name inside. the main source (not visible as just calling for other frames) <html> <frameset framespacing="0" border="0" rows="75," frameborder="0"> <frame name="topmenu" scrolling="no" noresize target="contents" src="topmenu.asp" marginwidth="0" marginheight="0"> <frameset cols="145,100%"> <frame name="choosevideo" src="choosevideo.asp" marginwidth="0" marginheight="0" scrolling="no" noresize > <frame name="showvideo" src="showvideo.asp" marginwidth="0" marginheight="0" scrolling="no" > </frameset> <noframes> <body topmargin="0" leftmargin="0"> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> then top frame just for logo (topmenu.asp) <html> <body bgcolor=#B496C5> <table border=0 cellpadding=8><tr><td></td></tr><tr><td width=116></td><td><IMG SRC=logo1.gif BORDER=0></td></tr></table> </body> </html> the left frame just for the up/down button and calling the iframe for scrolling pictures (choosevideo.asp) <html><body bgcolor=#56404C> <iframe id="datamain" src="choices.asp" width=120 height=280 marginwidth=0 marginheight=0 hspace=10 vspace=30 frameborder=0 scrolling=no></iframe> <p> <layer visibility=hide> <center> <a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><img src=up.gif border=0></a>       <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0"><img src=down.gif border=0></a> </layer> </body></html> the iframe (choices.asp) basically always the same code for each link, just changing the video file. <html><body bgcolor=#56404C alink=#FFFFFF link=#FFFFFF vlink=#FFFFFF> <p style="margin-top: 1; margin-bottom: 1"> <font face=verdana size=0> <br> <a title="My title 1" target=bigvideo href="bigvideo.asp?movie=mymovie1.wmv"> <img border="0" src="apercu/mythumbnail1.jpg"></a></font></p> <p style="margin-top: 1; margin-bottom: 1"> <font face=verdana size=0> <br> <p style="margin-top: 1; margin-bottom: 1"> <font face=verdana size=0> <br> <a title="My title 2" target=bigvideo href="bigvideo.asp?movie=mymovie2.wmv"> <img border="0" src="apercu/mythumbnail2.jpg"></a></font></p> <p style="margin-top: 1; margin-bottom: 1"> <font face=verdana size=0> <br> <br>  <!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT--> <script language="JavaScript1.2"> //Scrollable content III- By http://www.dynamicdrive.com var speed, currentpos=curpos1=0,alt=1,curpos2=-1 function initialize(){ if (window.parent.scrollspeed!=0){ speed=window.parent.scrollspeed scrollwindow() } } function scrollwindow(){ temp=(document.all)? document.body.scrollTop : window.pageYOffset alt=(alt==0)? 1 : 0 if (alt==0) curpos1=temp else curpos2=temp window.scrollBy(0,speed) } setInterval("initialize()",10) </script> </p> </body></html> the big frame to display the mute/pause button (showvideo.asp) <html> <head> <SCRIPT LANGUAGE="JavaScript"> var paused = 0; var muted = 0; function ini() { paused = 0; muted = 0; } function pausevideo() { var a = document.getElementById("PAUSEBUT"); if (paused == 0) { a.src = "pauseon.gif"; bigvideo.MediaPlayer.controls.pause() paused = -1; } else { a.src = "pauseoff.gif"; bigvideo.MediaPlayer.controls.play() paused = 0; } } function mutevideo() { var b = document.getElementById("MUTEBUT"); if (muted == 0) { b.src = "muteon.gif"; bigvideo.MediaPlayer.settings.mute=-1; muted=-1 } else { b.src = "muteoff.gif"; bigvideo.MediaPlayer.settings.mute=0; muted=0 } } </SCRIPT> <style type="text/css"> / colored borders put on for visual effect only / body{ height: 100%; margin: 0; padding: 0; } #spacer{ height: 95%; float: left; width: 1px; font-size: 1px; / to make sure width is not overridden / padding: 0; margin: 0; } #contentwrap{ width: 100%; text-align: center; padding: 0; margin: 0; } #content{ padding: 30px; border-width: 1px; } #footer{ clear: both; height: 5%; border-width: 1px 0 0 0; vertical-align: middle; padding: 0; margin: 0; } </style> </head> <body background=backmain.gif onload="ini();"> <div id="spacer"></div> <div id="contentwrap"> <div id="content"> <b><font color="#FFFFFF"><a target="_top" href="../index.asp"><font color="#FFFFFF">Home</font></a></font></b><p> <iframe name=bigvideo width=374 height=272 frameborder=0 marginwidth=0 marginheight=0 src=bigvideo.asp ></iframe> <p> </p> <INPUT type=image src=pauseoff.gif name=PAUSEBUT onclick="javascript:pausevideo()" ALT="Pause">    <INPUT type=image src=muteoff.gif name=MUTEBUT onclick="javascript:mutevideo()" ALT="Mute"> </div><!-- content --> </div><!-- contentwrap --> <div id="footer"> <div id="contentwrap"> <div id="content">  </div> <!-- content --> </div> <!-- contentwrap --> <div id="footer"> <strong><font face="verdana" color="#FFFFFF" size="0">Jean-Claude Brussino 28, ch d'Archamps 1257 Croix-de-Rozon  tél.+Fax +4122 7 711711  mobile +4179 476 10 63</div> </font></strong> </div> </body> Last edited by Giroud Francois; October 8th, 2005 at 02:38 PM.*

October 8th, 2005, 07:38 AM	#2
Giroud Francois Inner Circle Join Date: Feb 2004 Location: switzerland Posts: 2,133	something i wrote, so fell free to copy it http://www.imagidee.ch/image2/pagevideo/main.asp

October 8th, 2005, 12:48 PM	#3
Dan Euritt Trustee Join Date: Mar 2004 Location: Carlsbad CA Posts: 1,132	that's a nice interface Giroud... i went to copy it, but there is next to nothing in the "view source" window... i guess that the .asp scripts are not visible, sorta like external java files.

October 8th, 2005, 02:27 PM	#5
Giroud Francois Inner Circle Join Date: Feb 2004 Location: switzerland Posts: 2,133	due to forum limitation i had to put this in a new reply. the last frame (where video plays) the bigvideo.asp to display video <html> <body bgcolor=#FFFFFF style="overflow:hidden"><center> <table border=0 align=center><tr><td background=wait.gif> <!-- Check Media Player Version --> <SCRIPT LANGUAGE="VBScript"> On Error Resume Next lngMP70 = IsObject(CreateObject("WMPlayer.OCX")) document.write "<OBJECT ID=MediaPlayer " document.write "STANDBY=""Loading Microsoft Windows Media Player components..."" " document.write " WIDTH=368 HEIGHT=266 " If (lngMP70) Then ' Windows Media Player 7 Code document.write " CLASSID=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6>" document.write "<PARAM NAME=""url"" " Else ' Windows Media Player 6.4 Code document.write " CLASSID=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 " document.write "CODEBASE=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" document.write "type=""application/x-oleobject"">" document.write "<PARAM NAME=""FileName"" " End If </SCRIPT> VALUE="mms://194.38.169.35/imagidee/"> <param name="uiMode" value="invisible"> <PARAM NAME="windowlessVideo" Value="0"> <PARAM NAME="animationatStart" VALUE="0"> <PARAM NAME="TransparentAtStart" Value="-1"> <PARAM NAME="AutoStart" VALUE="-1"> <PARAM NAME="EnableContextMenu" VALUE="-1"> <PARAM NAME="ShowDisplay" VALUE="0"> <PARAM NAME="ShowControls" VALUE="0"> <PARAM NAME="ShowStatusBar" VALUE="0"> <PARAM NAME="PlayCount" VALUE="0"> <param name="AutoSize" value="-1"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/" width="368" height="266" src="mms://194.38.169.35/imagidee/" filename="mms://194.38.169.35/imagidee/" autostart="True" showcontrols="False" showstatusbar="False" showdisplay="False" autorewind="True"> </embed> </OBJECT> </td></tr></table> <SCRIPT LANGUAGE="JavaScript"> function showvideo() { MediaPlayer.uiMode = "none"; } setTimeout("showvideo()", 11000); </SCRIPT> </body></html>

October 8th, 2005, 02:52 PM	#6
Giroud Francois Inner Circle Join Date: Feb 2004 Location: switzerland Posts: 2,133	there is a special feature i put that can be improved. when you click on a thumbnail, there is a delay of 10 sec before lauching the video and the mediaplayer is hidden behind a picture.(the car) after 10 sec, the image is removed and the mediaplayer is visible. these 10 sec allow the stream to start playing. sometime it is too short and you see a black video for few sec. and sometime it is too long and you can hear the video starting to play behind the picture. There are some ways to know when the mediaplayer really start to play, so you could replace this fixed 10 sec delays by a dynamic delay that really depends of when video starts. I never take the time to do this but it should be really easy. My opinion is that Pause and Mute is enough for a clean interface, you rarely use the stop/play/FF or rewind function (specially for web video). a sliding bar for volume would be the only thing that could be still necessary. i started to code for it, but never implement.

October 8th, 2005, 09:09 PM	#7
Travis Maynard Regular Crew Join Date: Dec 2004 Location: Chapmanville, USA Posts: 138	Thanks Giroud! This should help out a lot!