Windows 媒体播放器在 JQuery 对话框关闭后继续播放

Question

我有一个 MVC 应用程序。主视图将有一个带有记录列表的网格。每个录音旁边都有一个播放按钮。实际上，播放按钮是一个 ActionLink。在该 ActionLink 的 OnClick 事件上，我在 JQuery 对话框中打开另一个视图，该视图具有 Windows 媒体播放器。 OnClick 事件在 Javascript 中定义（参见下面的代码）。问题是当我关闭对话框时 windows 媒体播放器继续播放录音！我试图删除媒体播放器对象 $(#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( event, ui )

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

更新 1

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

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

这可能会告诉玩家停止。这将取决于向浏览器提供 WMP 对象的方式。更新您的 post 并包含代码中显示的结果 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

如评论中所述，强烈建议使用 audio 元素。这是一个例子：

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

Windows 媒体播放器在 JQuery 对话框关闭后继续播放

Windows Media Player continues to play when JQuery Dialog is closed

jquery

jquery-ui

jquery-ui-dialog

embedded-media

asp.net-mvc-5