| Author |
Message |
Carl Gilbert
Guest
|
 Posted:
Thu Apr 07, 2005 11:27 pm Post subject:
Video player in web page |
|
|
Hi
I have a web page in which I want to allow the user to play a small video
clip. I have a very simple design but I have no idea if it is possible.
I have put the design at the following URL:
http://www.blackwaterbadgers.co.uk/media_player.jpg
I might try and replace the 'play' text on the slider bar control with play
a pause icon depending on the play state of the video.
Does anyone know if this kind of design is achievable?
Regards, Carl Gilbert
|
|
| Back to top |
|
 |
Neil Smith [MVP Digital M
Guest
|
| Posted:
Fri Apr 08, 2005 1:07 pm Post subject:
Re: Video player in web page |
|
|
Sure it's quite possible. Let's say your embedded media player
object's HTML ID is "MediaPlayer"
We'd write some javascript which detects the media player's state
change, and then use standard stuff like Macromedia's image swap code
(from Dreamweaver) to flip and restore the image. I'll assume you can
find or code image flip code yourself, so we'll concentrate on the
media player side.
This code should be run "onload" i.e. <body onload="setPlayerID()">
<script language="javascript1.2">
function setPlayerID() {
WMP9=document.getElementById("MediaPlayer");
WMP9.attachEvent("playstatechange",setPlayerState);
}
</script>
That attaches an event handler to the player object, and when the
player's playState changes then we call the javascript function called
"setPlayerState". So here it is :
<script language="javascript1.2">
function setPlayerState() {
WMP9=document.getElementById("MediaPlayer");
if (WMP9.playState==2) {
// playState value 2 is "Paused"
/* Your code here to make sure the button image
shows the "Play" text (the opposite of the play
state cause if it's Paused we want to show the
user a button image labelled "Play" and vice-versa
*/
}
if (WMP9.playState==3) {
// playState value 3 is "Playing"
/* Your code here to show the "Pause" image
*/
}
}
</script>
Just slap that code in the document's <head> or in an external .js
file (without the <script> tags in an external file) and replace the
commented text with your image flip code.
You might want to look at http://www.irt.org/script/image.htm
javascript image FAQ if you're unfamiliar with coding this, but it's
all very standard stuff.
Hope that helps
Cheers - Neil
On Thu, 07 Apr 2005 23:27:21 GMT, "Carl Gilbert"
<mr_carl_gilbert@hotmail.com> wrote:
| Quote: | Hi
I have a web page in which I want to allow the user to play a small video
clip. I have a very simple design but I have no idea if it is possible.
I have put the design at the following URL:
http://www.blackwaterbadgers.co.uk/media_player.jpg
I might try and replace the 'play' text on the slider bar control with play
a pause icon depending on the play state of the video.
Does anyone know if this kind of design is achievable?
Regards, Carl Gilbert
|
|
|
| Back to top |
|
|
Carl Gilbert
Guest
|
| Posted:
Fri Apr 08, 2005 4:14 pm Post subject:
Re: Video player in web page |
|
|
Thanks for the reply, once I work out how to get a tracker bar I will try it
out.
Further to my last post. Is there anyway to over lay an image over the
embedded media player control?
Regards, Carl
"Neil Smith [MVP Digital Media]" <neil@nospam.com> wrote in message
news:b51d51lm72jciflt2127h48bmr3jehe7ns@4ax.com...
| Quote: | Sure it's quite possible. Let's say your embedded media player
object's HTML ID is "MediaPlayer"
We'd write some javascript which detects the media player's state
change, and then use standard stuff like Macromedia's image swap code
(from Dreamweaver) to flip and restore the image. I'll assume you can
find or code image flip code yourself, so we'll concentrate on the
media player side.
This code should be run "onload" i.e. <body onload="setPlayerID()"
script language="javascript1.2"
function setPlayerID() {
WMP9=document.getElementById("MediaPlayer");
WMP9.attachEvent("playstatechange",setPlayerState);
}
/script
That attaches an event handler to the player object, and when the
player's playState changes then we call the javascript function called
"setPlayerState". So here it is :
script language="javascript1.2"
function setPlayerState() {
WMP9=document.getElementById("MediaPlayer");
if (WMP9.playState==2) {
// playState value 2 is "Paused"
/* Your code here to make sure the button image
shows the "Play" text (the opposite of the play
state cause if it's Paused we want to show the
user a button image labelled "Play" and vice-versa
*/
}
if (WMP9.playState==3) {
// playState value 3 is "Playing"
/* Your code here to show the "Pause" image
*/
}
}
/script
Just slap that code in the document's <head> or in an external .js
file (without the <script> tags in an external file) and replace the
commented text with your image flip code.
You might want to look at http://www.irt.org/script/image.htm
javascript image FAQ if you're unfamiliar with coding this, but it's
all very standard stuff.
Hope that helps
Cheers - Neil
On Thu, 07 Apr 2005 23:27:21 GMT, "Carl Gilbert"
mr_carl_gilbert@hotmail.com> wrote:
Hi
I have a web page in which I want to allow the user to play a small video
clip. I have a very simple design but I have no idea if it is possible.
I have put the design at the following URL:
http://www.blackwaterbadgers.co.uk/media_player.jpg
I might try and replace the 'play' text on the slider bar control with
play
a pause icon depending on the play state of the video.
Does anyone know if this kind of design is achievable?
Regards, Carl Gilbert
|
|
|
| Back to top |
|
|
Neil Smith [MVP Digital M
Guest
|
| Posted:
Fri Apr 08, 2005 5:23 pm Post subject:
Re: Video player in web page |
|
|
On Fri, 8 Apr 2005 17:14:47 +0100, "Carl Gilbert"
<cnl@newsgroup.nospam> wrote:
| Quote: | Thanks for the reply, once I work out how to get a tracker bar I will try it
out.
Further to my last post. Is there anyway to over lay an image over the
embedded media player control?
|
Yeah sure - I did it like this :
<div id="playerouter">
<div id="overlay"><a href="#" onclick="alert('clicked')"><img
src="spacer.gif" width="176" height="140" border="0" alt="Preview
Image" /></a></div>
<div id="playerinner">
<object id="MediaPlayer"
classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"
type="application/x-oleobject" width="176" height="144">
<param name="url" value="trailer.wmv" />
<param name="autostart" value="1" />
<param name="showcontrols" value="0" />
<param name="uimode" value="mini" />
<param name="stretchtofit" value="1" />
<param name="enablecontextmenu" value="1" />
</object>
</div>
</div>
Then you supply some CSS to set the overlays absolute position and
clipping region, so that the DIVs sit on top of each other (using the
z-index) so
<style type="text/css">
#playerouter {
position: relative;
left: 0;
top: 0;
width: 176px;
height: 144px;
}
#overlay {
position: absolute;
left: 0;
top: 0;
width: 176px;
height: 144px;
z-index: 1;
display: block;
}
#playerinner {
position: absolute;
left: 0;
top: 0;
width: 176px;
height: 144px;
z-index: 0;
clip: rect(0px 176px 144px 0px);
}
</style>
HTH
Cheers - Neil |
|
| Back to top |
|
|
|
|
|
|
FAQ
Memberlist
Register
Profile
Log in to check your private messages
Log in