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

Question

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

用户可以打开一个视频，关闭它，然后打开另一个视频，次数不限。但是，特别是在 Chome 上，在播放 3-5 个视频后，浏览器开始挂起超过两分钟，同时显示一条消息 "waiting for socket"。

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

我处理媒体播放器的方式一定有问题。我相信即使播放器的 html 已从 dom.

中删除，套接字也会在一段时间内对媒体开放。

使用： Bootstrap, MediaElement.js, HTML5 视频， MVC, 控制器返回 "Range Request" 的 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

在 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();
    }
});

Answer 2

我要去拿我的自学者徽章，在这里回答我自己的问题。

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

将 HTML5 视频源设置为不同于原始 URL 的内容。这将触发播放器关闭打开的套接字连接。
将 HTML5 视频源设置为 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 提供超小的 base64 视频。 https://github.com/kud/blank-video

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

How to properly dispose of an HTML5 Video and close socket or connection

html

video

google-chrome

mediaelement.js

twitter-bootstrap