Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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:

    Code:
    <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:

    Code:
    <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.
    Last edited by whopub; 02-08-2010 at 10:02 PM.

  • #2
    New Coder
    Join Date
    Apr 2006
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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!

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jan 2010
    Posts
    137
    Thanks
    3
    Thanked 10 Times in 10 Posts
    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, 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.

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jenius View Post
    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.

    Quote Originally Posted by jenius View Post
    The second question is a CSS question. I have an example of that here, 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.

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    137
    Thanks
    3
    Thanked 10 Times in 10 Posts
    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...

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •