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

5jdjgkvh  于 2023-06-27  发布在  Go
关注(0)|答案(3)|浏览(181)

我正在建立一个网页,上面有一个视频记录列表。点击每个视频记录会在同一页面上打开一个模态对话框,其中包含记录的详细信息和HTML5视频播放器。
用户可以打开一个视频,关闭它,并根据需要多次打开另一个视频。然而,具体在Chome上,在3-5个视频之后,浏览器开始挂起两分钟以上,同时显示消息“等待套接字”。
做了一些阅读,我已经缩小了它的Chrome无法打开超过6个连接到同一主机。
我一定是在处理媒体播放器的方式上做错了什么。我相信这个套接字在一段时间内仍然对媒体开放,即使播放器的html已经从dom中删除了。
使用:Bootstrap、MediaElement.js、HTML5 Video、MVC、Controller返回FilePathResult的“Range Request”

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

gwo2fgha1#

我要去拿我的自学者徽章,在这里,回答我自己的问题。
我对此做了大约8个小时的研究,想出了一个很好的解决方案。必须做三件事。
1.将HTML5视频src设置为原始URL以外的其他内容。这将触发播放器关闭打开的套接字连接。
1.将HTML5 video src设置为Base64编码的数据对象。这将防止错误代码4问题MEDIA_ERR_SRC_NOT_SUPPORTED。
1.对于旧版本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上的库德提供的超小base64视频。https://github.com/kud/blank-video

v64noz0r

v64noz0r2#

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

kyvafyod3#

杰森·威廉姆斯的回答是唯一对我有用的。我没有足够的声誉点来评论,但我想补充的是,当我使用空格键(或任何其他键)在www.example.com()和video.pause()之间切换动态创建的视频时,这个问题表现出来了。video.play() and video.pause() on dynamically created videos. Audio from previously played, then destroyed, videos would stack up and alternately play or be paused every other one in the background.
重要的是要记住,这些被破坏的视频仍然存在于DOM中的某个地方,它们只是有base64源代码。触发后续视频的播放/暂停触发了控制台中的Unhandled Promise Rejection: NotSupportedError: The operation is not supported.。使用下面的行抑制了未处理的promise错误。

if(video.src == "data:video/mp4;base64,AAAAHG...MTAw") {
 return false
}

相关问题