two issues with a working embedded video...

Hi,

I'm using an embedded video, which plays in IE, Firefox and Opera, but I need help to figure out a couple of things...

1st problem

The custom 'buttons' I put together (just regular images with 'onclick') only work in IE. Firefox and Opera just don't do anything. To play the video with those two I have to right click and pick 'play' using the context menu.

The code I'm using on my 'buttons' is:

<SCRIPT>
function play(pluma) { document.getElementById(pluma).play() }
function pause(pluma) { document.getElementById(pluma).pause() }
function stop(pluma) { document.getElementById(pluma).stop() }
</SCRIPT>

And then:

<EMBED TYPE="application/x-mplayer2" CLASSID="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"
PLUGINSPAGE="http://www.microsoft.com/Windows/Mediaplayer/" SRC="video/pluma.mpg" ID="pluma" WIDTH="384" HEIGHT="288" ShowControls="0" ShowDisplay="0" ShowStatusBar="0" AutoStart="0" AutoRewind="1" ShowPositionControls="0" ShowTracker="0" FullScreen="0" ClickToPlay="1" AnimationAtStart="0" IMAGE="images/video/v_preview_pluma.jpg"></EMBED>

<INPUT TYPE="image" SRC="../images/video/pb_c_1play_out.jpg" WIDTH="36" HEIGHT="37" OnClick="play('pluma')">

<INPUT TYPE="image" SRC="../images/video/pb_c_2stop_out.jpg" WIDTH="36" HEIGHT="37" OnClick="stop('pluma')">

<INPUT TYPE="image" SRC="../images/video/pb_c_3pause_out.jpg" WIDTH="36" HEIGHT="37" OnClick="pause('pluma')">

Here's the error console message from Firefox:

Error: [Exception... "'JavaScript component does not have a method named: "onLocationChange"' when calling method: [nsIWebProgressListener::onLocationChange]" nsresult: "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)" location: "<unknown>" data: no]

And from Opera:

JavaScript - file://localhost/...
Event thread: click
Error:
name: TypeError
message: Statement on line 2: Type mismatch (usually non-object value supplied where object required)
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace


Any ideas on how to fix things to make sure those buttons work with those browsers too?

2nd problem

Is there any way to use an image as a placeholder, on top of the player, instead of its black screen, just to serve as a cover of sorts, representing the video until the user click on the 'play' button?

Thanks.

No replies yet... but I figured out a few things in the meantime.

First of all, the initial bit of code I showed in the original post doesn't really seem to do anything, in any browser. At least not on IE, which works great without it. So I just removed it.

As for the embed code, I tweaked it a bit, to solve the 'preview image' problem. Basically I placed a background image beneath the video using CSS (I centered it, on video's TR, image has the same size, of course), and turned the 'uiMode' to 'invisible'. It works great, since the image only shows up when the video is not playing. And it even shows up again after you hit stop, or the video ends. It really solves the problem.

So all is great and... hmmm, not really.

Nothing is working on Firefox and Opera! The control buttons don't do anything and the preview image never shows up from beneath the video.

Here's the updated code, which is really working perfectly in IE8:

<TABLE ID="bump" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="515" HEIGHT="331">

<TR HEIGHT="288" ID="video_bkg"><TD ALIGN="center">

<EMBED TYPE="application/x-mplayer2" CLASSID="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" PLUGINSPAGE="http://www.microsoft.com/Windows/Mediaplayer/" SRC="video/pluma.mpg" NAME="pluma2" ID="pluma2" WIDTH="384" HEIGHT="288" ShowControls="0" ShowDisplay="0" ShowStatusBar="0" AutoStart="0" AutoRewind="1" ShowPositionControls="0" ShowTracker="0" FullScreen="0" ClickToPlay="1" AnimationAtStart="0" uiMode="invisible" TransparentAtStart="true"></EMBED>

</TD></TR>

<TR HEIGHT="5"><TD></TD></TR>

<TR HEIGHT="38" VALIGN="bottom"><TD ALIGN="center">

<INPUT TYPE="image" SRC="../images/video/pb_c_1play_out.jpg" WIDTH="36" HEIGHT="37" OnClick="play('pluma2')">

<INPUT TYPE="image" SRC="../images/video/pb_c_2stop_out.jpg" WIDTH="36" HEIGHT="37" OnClick="stop('pluma2')">

<INPUT TYPE="image" SRC="../images/video/pb_c_3pause_out.jpg" WIDTH="36" HEIGHT="37" OnClick="pause('pluma2')">

</TD></TR></TABLE>

This probably can be solved with a bit of javascript tweaking but I don't know how to do it. Any ideas? C'mon people, don't let IE be the good browser here! That would make me sick! :(

Just one more thing: 'ClickToPlay' is not working. Not even in IE!

Of course that doesn't really matter now considering the solution I used for the preview image, right? Or should the video start playing when the user clicks on the preview image, even considering we can't see it? After all the video, although 'invisible' is still supposed to be there, on top.

Ok, 1st of all, this is a javacript question, which is why we are not answering. Try posting this in the javascript forum. I can see how you would think it would go here, but this is for the graphical side of multimedia, not the code used to play it.

The second question is a CSS question. I have an example of that here (http://djjenius.com/testing/jenius), which you can check out. How I did this in short was by placing the overlay image in a div below the media player, applying relative positioning, and then using a negative "top" value to bring it up and over the media player.

Ok, 1st of all, this is a javacript question, which is why we are not answering. Try posting this in the javascript forum. I can see how you would think it would go here, but this is for the graphical side of multimedia, not the code used to play it.

Front page says this is the place for multimedia on the web, such as audio and video embedding so I went for it.

The second question is a CSS question. I have an example of that here (http://djjenius.com/testing/jenius), which you can check out. How I did this in short was by placing the overlay image in a div below the media player, applying relative positioning, and then using a negative "top" value to bring it up and over the media player.

Thanks, I'll check it out. It just pisses me off that I ended up with something that only works on IE. How unusual is that... and it's dead on. Perfect behaviour, barebones code.

If nothing works I'll post the whole thing in the javascript section, hoping no one comes here and eats the neighbour's cat as punishment for the double post.

As for the first part, I believe it, and I mentioned that I didn't think it was totally unreasonable to post here. I just think the people who frequent this section are not really deeply knowledgeable in javacript, so you'd have better luck in that forum.

That is awfully strange on the IE thing though, I don't think I've ever seen that.

You should be able to easily solve the CSS part - I wouldn't post that in the javascript forum. But definitely on the first part. If I knew anything about javascript, I'd be glad to help but I have absolutely no idea how that language works...

I ended up using the object/embed combo and giving up on the custom control buttons thing, for the sake of browser compatibility. I was able to get the video to play on all browsers, but only through the context menu controls. Solving that problem with Firefox would mean installing the plugin, and then there'd be Opera to sort out too, so...

As for the background behind the video fake preview thing, it's working on IE and Firefox. Sadly the transparent UImode and TransparentAtStart trick doesnt seem to work on Opera. Still, as there are so few Opera users on my demographics, and all they'll lose is the preview image, I can live with that. Especially since they do get a black screen, with mediaplayer controls beneath, so pushing play will solve the 'what the hell is this video about' mystery...

Time to deal with the other 5 trillion webdesign issues at hand...