如何正确处理HTML5视频并关闭套接字或连接(How to properly dispose of an HTML5 Video and close socket or connection)

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

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

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

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

使用：Bootstrap，MediaElement.js，HTML5视频，MVC，Controller返回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(); } });

I am building a web page with a list of video records. Clicking on each video record opens a modal dialog on the same page with detail of the record and an HTML5 Video player.

A user can open one video, close it, and open another as many times as they want. However, on Chome specifically, after 3-5 videos, the browser starts hanging for upwards of two minutes while displaying a message "waiting for socket".

Doing some reading, I have narrowed it to Chrome's inability to open more than 6 connections to the same host.

I must be doing something wrong with how I dispose of the Media players. I believe the socket remains open to the media for some period even though the html for the player has been removed from the dom.

Using: Bootstrap, MediaElement.js, HTML5 Video, MVC, Controller returning "Range Request" of 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(); } });

最满意答案

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

我做了大约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

I am going to go for my Self Learner badge, here, and answer my own question.

I did about 8 hours of research on this and came up with a great solution. Three things had to be done.

Set the HTML5 video src to something other than the original URL. This will trigger the player to close the open socket connection. Set the HTML5 video src to a Base64 encoded data object. This will prevent the Error Code 4 issue MEDIA_ERR_SRC_NOT_SUPPORTED. For issues in older versions of Firefox, also trigger the .load() event.

My Code:

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

I came up with the idea to load the data object as the src. However, I'd like to thank kud on GitHub for the super small base64 video. https://github.com/kud/blank-video

更多推荐