Question

我有一个MVC应用程序。主视图将包含一个包含录制列表的网格。每个录音旁边都有一个播放按钮。实际上，播放按钮是ActionLink。在该ActionLink的OnClick事件上，我在JQuery对话框中打开另一个视图，该视图具有Windows Media Player。 OnClick事件在Javascript中定义（参见下面的代码）。问题是，当我关闭Dialog windows时，媒体播放器继续播放录音！我试图删除媒体播放器对象$（＃mediaplayer）.remove（），即使它被删除但仍然播放。我试图将整个Div的InnerHtml设置为＆＃34;＆＃34;，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）

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

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

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

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

当JQuery Dialog关闭时，Windows Media Player继续播放

1 个答案: