关闭JQuery对话框时，Windows媒体播放器继续播放

Question

我有一个MVC应用程序。主视图将有一个带有记录列表的网格。每个录音旁边都有一个播放按钮。实际上，播放按钮是一个ActionLink。在ActionLink的OnClick事件上，我在JQuery对话框中打开另一个视图，这个视图有Windows Media Player。OnClick事件是用Javascript定义的(见下面的代码)。问题是，当我关闭对话框窗口媒体播放器继续播放录音!我试图删除媒体播放器对象$(#mediaplayer).remove()，即使它被删除，但仍然播放。我试图将整个Div的InnerHtml设置为"，Div被删除，但媒体播放器仍然播放。唯一的解决方案，为我工作，但它不是我想要的是做窗口。位置。reload()在对话框的关闭事件，它会重新加载父页我不想做的事情，因为如果用户是在网格的第二页，它会把他带到第一页。有人能帮忙吗?

@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>

这是媒体播放器的嵌入代码

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

Answer 1

我的建议是:

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

或:

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

从http://api.jqueryui.com/dialog/event-beforeClose

beforeClose(event, ui)

当对话框即将关闭时触发。如果取消，对话框将不会关闭。

更新1

我将在beforeClose函数中添加如下内容:

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

这可能会告诉玩家停止。这将取决于如何将WMP对象提供给浏览器。最好更新您的帖子，并包含从您的代码中显示的结果HTML源代码。

您也可以考虑:http://malsup.com/jquery/media/

更新2

查看更多:在所有浏览器中嵌入Windows Media Player

给出你的目标代码，做一些调整:

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

使用以下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,
});

更新3

正如在注释中提到的，强烈建议使用audio元素。下面是一个例子:

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