Question

我正在构建一个包含视频记录列表的网页。单击每个视频记录会在同一页面上打开一个模式对话框，其中包含记录和HTML5视频播放器的详细信息。

用户可以打开一个视频，关闭它，然后根据需要打开另一个视频。但是，特别是在Chome，在3-5个视频之后，浏览器开始挂起超过两分钟，同时显示“等待套接字”的消息。

做一些阅读，我已将其缩小到Chrome无法打开超过6个连接到同一主机。

我必须对我如何处置媒体播放器做错事。我相信即使播放器的html已从dom中删除，套接字仍会对媒体开放一段时间。

使用：引导， MediaElement.js， HTML5视频， MVC，控制器返回FilePathResult的“范围请求”

// Handling Bootstrap Modal Window Close Event 
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
    var player = xr.ui.mediaelement.xrPlayer();
    if (player) {
        player.pause();
        player.remove();
    }
});

Answer 1

我将在这里找到我的自学者徽章，并回答我自己的问题。

我做了大约8个小时的研究，并提出了一个很好的解决方案。必须做三件事。

将HTML5视频src设置为原始URL以外的其他内容。这将触发播放器关闭打开的套接字连接。
将HTML5视频src设置为Base64编码数据对象。这将阻止错误代码4问题MEDIA_ERR_SRC_NOT_SUPPORTED。
对于旧版Firefox中的问题，也会触发.load（）事件。

我的代码：

// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
    var player = xr.ui.mediaelement.xrPlayer();
    if (player) {
        player.pause();
        ("video,audio").attr("src","data:video/mp4;base64,AAAAHG...MTAw");
        player.load();
        player.remove();
    }
});

我想出了将数据对象加载为src的想法。但是，我要感谢GitHub上的kud for super small base64视频。 https://github.com/kud/blank-video

Answer 2

在pause（）和remove（）之间添加了一行：

// Handling Bootstrap Modal Window Close Event 
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
    var player = xr.ui.mediaelement.xrPlayer();
    if (player) {
        player.pause();
        ("video,audio").attr("src", "");
        player.remove();
    }
});

如何正确处理HTML5视频并关闭套接字或连接

2 个答案: