Custom Windows Media playback controls? at DVinfo.net

Go Back   DV Info Net > Cross-Platform Post Production Solutions > Distribution Center > Flash / Web Video


Reply
 
Thread Tools Search this Thread
Old October 7th, 2005, 10:52 PM   #1
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!
Travis Maynard is offline   Reply With Quote
Old October 8th, 2005, 08:38 AM   #2
Inner Circle
 
Join Date: Feb 2004
Location: switzerland
Posts: 2,131
something i wrote, so fell free to copy it

http://www.imagidee.ch/image2/pagevideo/main.asp
Giroud Francois is offline   Reply With Quote
Old October 8th, 2005, 01:48 PM   #3
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.
Dan Euritt is offline   Reply With Quote
Old October 8th, 2005, 03:05 PM   #4
Inner Circle
 
Join Date: Feb 2004
Location: switzerland
Posts: 2,131
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> &nbsp; &nbsp; &nbsp; <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>&nbsp;
<!--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>&nbsp;</p>
<INPUT type=image src=pauseoff.gif name=PAUSEBUT onclick="javascript:pausevideo()" ALT="Pause">&nbsp; &nbsp;
<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">
&nbsp;</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&nbsp; tÚl.+Fax +4122 7 711711&nbsp; mobile +4179 476
10 63</div>
</font></strong>&nbsp;</div>
</body>

Last edited by Giroud Francois; October 8th, 2005 at 03:38 PM.
Giroud Francois is offline   Reply With Quote
Old October 8th, 2005, 03:27 PM   #5
Inner Circle
 
Join Date: Feb 2004
Location: switzerland
Posts: 2,131
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>
Giroud Francois is offline   Reply With Quote
Old October 8th, 2005, 03:52 PM   #6
Inner Circle
 
Join Date: Feb 2004
Location: switzerland
Posts: 2,131
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.
Giroud Francois is offline   Reply With Quote
Old October 8th, 2005, 10:09 PM   #7
Regular Crew
 
Join Date: Dec 2004
Location: Chapmanville, USA
Posts: 138
Thanks Giroud!

This should help out a lot!
Travis Maynard is offline   Reply
Reply

DV Info Net refers all where-to-buy and where-to-rent questions exclusively to these trusted full line dealers and rental houses...

Professional Video
(800) 833-4801
Portland, OR

B&H Photo Video
(866) 521-7381
New York, NY

Z.G.C.
(973) 335-4460
Mountain Lakes, NJ

Abel Cine Tech
(888) 700-4416
N.Y. NY & L.A. CA

Precision Camera
(800) 677-1023
Austin, TX

DV Info Net also encourages you to support local businesses and buy from an authorized dealer in your neighborhood.
  You are here: DV Info Net > Cross-Platform Post Production Solutions > Distribution Center > Flash / Web Video

Thread Tools Search this Thread
Search this Thread:

Advanced Search

 



Google
 

All times are GMT -6. The time now is 03:22 AM.


DV Info Net -- Real Names, Real People, Real Info!
1998-2017 The Digital Video Information Network