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

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 小时的研究，并提出了一个很好的解决方案。必须做三件事。

1. 将 HTML5 视频源设置为原始 URL 以外的其他内容。这将触发播放器关闭打开的套接字连接。
2. 将 HTML5 视频源设置为 Base64 编码数据对象。这将防止错误代码 4 问题 MEDIA_ERR_SRC_NOT_SUPPORTED。
3. 对于旧版本 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

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