当 JQuery 对话框关闭时，Windows Media Player 继续播放

Question

我有一个 MVC 应用程序。主视图将有一个带有录音列表的网格。每个录音旁边都有一个播放按钮。实际上，播放按钮是一个 ActionLink。在该 ActionLink 的 OnClick 事件上，我在 JQuery 对话框中打开另一个视图，该视图具有 Windows Media Player。 OnClick 事件在 Javascript 中定义（参见下面的代码）。问题是当我关闭对话框窗口媒体播放器时继续播放录音！我试图删除媒体播放器对象 $(#mediaplayer).remove()，即使它已被删除但仍在播放。我试图将整个 Div 的 InnerHtml 设置为“”，Div 被删除但媒体播放器仍在播放。唯一对我有用但不是我想要的解决方案是在对话框的关闭事件中执行 window.location.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(事件, ui)

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

更新 1

我会在beforeClose 函数中添加这样的内容：

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

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

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

更新 2

查看更多：Embedding Windows Media Player for all browsers

根据您的目标代码，进行一些调整：

<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

正如 cmets 中提到的，强烈建议使用 audio 元素。这是一个例子：

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