Embedded player does not work in remote browser

Question

I am using embedded wmv player in my web project(jsp) to play *.avi files which are located on the server. When i click on the links in jsp they work fine, the video is being played.

But when i try to open the page on another machine, the embedded player does not work, instead its downloading the file from the server.

This is the code i used

<script type="text/javascript">
function play(media){
document.getElementById('mediaplayer').innerHTML=
'<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95"'
'type="application/x-oleobject" width="320" height="285">'
'<param name="showControls" value="false">'
'<param name="fileName" value="'media '">'
'<embed type="application/x-mplayer2" width="320" height="285"'
'showcontrols="false" src="'media '"><\/embed><\/object>'
}
</script>
<div id="mediaplayer"></div>
<ul id="menu">
<li><a onclick="play(this.href);return false" href="http://www.myurlname/afghan.avi">Source 1</a></li>
</ul>

found the above script on the web, but couldnt find a solution for it.

Answer 1

The way your function appends the player markup seems to be incorrect. You should be concatenating all those strings. You do have an error message, open the browser's console and you'll see this:

Uncaught SyntaxError: Unexpected token <

I've seen this on this fiddle with your code

Here's a sample method that I used in an old project:

    // this requires jquery
    var MediaLink_Click = function (e) {

        var mp = document.getElementById('mediaPlayer');
        if ((null !== mp) && (undefined !== mp)) {
            if ((null != mp.contentDocument) && (undefined !== mp.contentDocument)) {
                $("object").each(function () {
                    this.contentDocument.controls.stop();
                });
            }
            $(mp).remove();
        }

        var oeTags = '<object id="mediaPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="640px" height="480px"'
                    + 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"'
                    + 'standby="Loading Microsoft Windows Media Player components..."'
                    + 'type="application/x-oleobject">'
                    + '   <param name="autoStart" value="true"/>'
                    + '   <param name="url"       value="' + e.data.media_path + '" />'
                    + '   <param name="wmode"     value="transparent" />'
                    + '   <param name="uiMode"    value="full" />'
                    + '   <param name="loop"      value="false" />'
                    + '   <embed id       ="EmbedmediaPlayer"'
                    + '       type        ="application/x-mplayer2"'
                    + '       src         ="' + e.data.media_path + '"'
                    + '       width       ="640"'
                    + '       height      ="480">'
                    + '   </embed>'
                    + '</object>';
        $("#mediaplayer").html(oeTags); 
    }; 

Note that I'm concatenating the strings with a plus(+) sign before each line. and you can use it like this:

$("a").bind("click", { media_path: "path to your file goes here" }, MediaLink_Click);

Try this and let me know if you are able to run.

This fiddle shows it "kinda" working (the .avi file doesn't exist so it's not gonna play, but it loads the player and everything)