Windows Media Player continues to play when JQuery Dialog is closed

Question

I have an MVC application. The main view will have a grid with a list of recordings. Next to each recording there is a Play Button. In reality the play button is an ActionLink. On the OnClick Event of that ActionLink I open another view in a JQuery Dialog, this view has the Windows Media Player. The OnClick Event is defined in Javascript (See code Below). The issue is that when I close the Dialog windows media player continue playing the recording! I tried to remove the media player object $(#mediaplayer).remove(), even it is removed but still plays. I tried to set the InnerHtml of the whole Div to "", the Div is removed but the media player still plays. The only solution that worked for me but it's not what I want is to do window.location.reload() in the close event of the dialog, it will reload the parent page something I don't want to do because if the user is on the second page of the Grid it will bring him to the first page. Anyone can help please?

@Html.ActionLink("Play", "blablabla", new { controller = "Default", @url = MyUrl }, new { @class = "button" })

<script type="text/javascript">

$(document).on("click", ".button", function (e) {
    var url = $(this).attr('href');
    var dialog1 = $('<div id="divPlayer" style="display:none"></div>').appendTo('body');
    dialog1.load(url, {},
        function (responseText, textStatus, XMLHttpRequest) {
            dialog1.dialog({
                close: function (event, ui) {
                    dialog1.empty();
                    dialog1.dialog('destroy').remove();
                },
                draggable: true,
                width: 340,
                height: 105,
                resizable: false,
                closeOnEscape: true,
                modal: true,
            });
        });
    dialog1.unload(url, {});
    return false;

});

</script>

Here is the embed code for the media player

<object width="320" height="40"
        classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
        id="mediaplayer1" style="border:none">
    <param name="Filename" value="@Model.URL">
    <param name="AutoStart" value="True">
    <param name="ShowControls" value="True">
    <param name="ShowStatusBar" value="False">
    <param name="ShowDisplay" value="False">
    <param name="AutoRewind" value="True">
    <embed id='altMediaPlayer' type="application/x-mplayer2"
           pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
           width="320" height="40" src="@Model.URL"
           filename="@Model.URL" autostart="True"
           showcontrols="True" showstatusbar="False"
           showdisplay="False" autorewind="True">
    </embed> 
</object>

You should consider using the HTML5 `audio` element which can be fully controlled via JavaScript instead of the Media Player plugin. For backward compatibility, there are libraries polyfilling the functionality in older browsers, such as http://mediaelementjs.com/ — Lucero, Oct 18 '16 at 16:36
I tried to use the HTML 5 audio element but unfortunately it doesn't play the recording. It says Invalid Source. I am calling a web-service which returns a URL to the recording, Window Media Player was able to stream it and play it but HTML 5 audio player didn't recognise the format I guess :/ — Walloud, Oct 18 '16 at 17:22

score 0 · Accepted Answer · edited May 23 '17 at 11:48

I would advise something like:

dialog1.dialog({
  beforeClose: function () {
    dialog1.html("");
  },
  draggable: true,
  width: 340,
  height: 105,
  resizable: false,
  closeOnEscape: true,
  modal: true,
});

Or:

$( "#divPlayer" ).on( "dialogbeforeclose", function( event, ui ) {
  $(this).html("");
  return true;
} );

From http://api.jqueryui.com/dialog/#event-beforeClose

beforeClose( event, ui )

Triggered when a dialog is about to close. If canceled, the dialog will not close.

Update 1

I would add something like this to the beforeClose function:

$('#mediaplayer1 embed')[0].controls.stop();

This might tell the player to stop. This will depend on how the WMP object is being offered up to the browser. It might be better to update your post and include the resulting HTML source that is shown from your code.

You may also consider: http://malsup.com/jquery/media/

Update 2

See More: Embedding Windows Media Player for all browsers

Given your object code, make some adjustments:

<object width="320" height="40"
        classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
        codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
        id="mediaplayer1" style="border:none">
    <param name="Filename" value="@Model.URL">
    <param name="AutoStart" value="true">
    <param name="ShowControls" value="true">
    <param name="ShowStatusBar" value="false">
    <param name="ShowDisplay" value="false">
    <param name="AutoRewind" value="true">
    <embed id='altMediaPlayer'
           type="application/x-mplayer2"
           pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
           width="320" height="40" src="@Model.URL"
           filename="@Model.URL"
           autostart="true"
           showcontrols="true"
           showstatusbar="false"
           showdisplay="False"
           autorewind="True">
    </embed> 
</object>

With the following jQuery:

dialog1.dialog({
  beforeClose: function () {
    if(-1 != navigator.userAgent.indexOf("MSIE")){
      $("#mediaplayer1")[0].Stop();
    } else {
      $("#altMediaPlayer")[0].controls.stop();
    }
  },
  draggable: true,
  width: 340,
  height: 105,
  resizable: false,
  closeOnEscape: true,
  modal: true,
});

Update 3

As was mentioned in comments, it is strongly suggested to use the audio element. Here is an example:

https://jsfiddle.net/Twisty/6fp7gdmh/

It's weird! This works and it doesn't work at the same time ! I explain myself. When I run your code the WMP continues to play, so I put an alert before the dialog1.html("") and after it. My alert was alert(dialog1.html()); When I spend sometime reading the html code in the alert box and I click ok in the alert box the Windows Media Player stops! it looks like emptying the html takes some time to work, it doesn't affect the WMP right away :/ I know this is weird but this is what happened exactly. Any idea why this is happening please? — Walloud, Oct 18 '16 at 20:40
I tried that already but i got a javascript error saying the controls is undefined! Indeed when I browse the media player object when debugging I can't see any controls object. I'm testing using IE. We use IE in our company. By the way I added the code for the media player that I embeded in my view. Thanks man! — Walloud, Oct 18 '16 at 22:04
@Walloud great, I see your update. I will review and hopefully find something to help. — Twisty, Oct 18 '16 at 22:42
@Walloud updated my update a little, try `$('#mediaplayer embed')[0].controls.stop();` Also what type of Audio file is this that is presented? Can you add a link to it for testing? — Twisty, Oct 18 '16 at 22:55
I would like to thank you so much @twisty for your help. The controls object is always undefined when I used wmp with classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95", but when I change it to classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" the controls object was there and I was able to do $('#mediaplayer').controls.stop() in the onbeforclose of the Dialog. If you can update your answer with the new classid since I am flagging it as the right answer. Cheers :) — Walloud, Oct 21 '16 at 16:08

Windows Media Player continues to play when JQuery Dialog is closed

1 Answers1