0

我有一个 MVC 应用程序。主视图将有一个带有录音列表的网格。每个录音旁边都有一个播放按钮。实际上，播放按钮是一个 ActionLink。在该 ActionLink 的 OnClick 事件上，我在 JQuery 对话框中打开另一个视图，该视图具有 Windows Media Player。OnClick 事件在 Javascript 中定义（参见下面的代码）。问题是当我关闭对话框窗口媒体播放器时继续播放录音！我试图删除媒体播放器对象 $(#mediaplayer).remove()，即使它已被删除但仍在播放。我试图将整个 Div 的 InnerHtml 设置为“”，Div 被删除但媒体播放器仍在播放。唯一对我有用但不是我想要的解决方案是在对话框的关闭事件中执行 window.location.reload() ，它将重新加载父页面我不这样做的东西' 不想这样做，因为如果用户在 Grid 的第二页上，它会将他带到第一页。任何人都可以帮忙吗？

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

1 回答 1

0

我会建议类似：

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（事件，用户界面）

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

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

于 2016-10-18T18:31:41.497 回答