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

Question

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

Found a solution: http://stackoverflow.com/a/22161950/2733283 that worked for me. — Jason Williams, Aug 26 '15 at 16:15

score 6 · Accepted Answer · answered Aug 28 '15 at 16:37

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

exactly 6 years later, this probably saved me 8 hours of debugging time ️ — Marco, Aug 27 '21 at 08:50

score 0 · Answer 2 · answered Aug 26 '15 at 16:19

0

Added a line between pause() and 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();
    }
});

answered Aug 26 '15 at 16:19

This almost works. Setting src="" on the video element does exactly what I am asking for by closing the socket. However, it causes an error to be thrown by the HTML5 player. The error code is 4 which can be translated as MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported. – Jason Williams Aug 28 '15 at 14:26
The error doesn't block my page. However, it is annoying that it shows up in my console error logging. Possibly, I could exclude errors with code 4 from being logged. But, I was hoping for a better solution. – Jason Williams Aug 28 '15 at 14:28

score 0 · Answer 3 · answered Jun 26 '23 at 20:22

Jason Williams' answer is the only one that worked for me. I don't have enough reputation points to comment but I'd like to add that the problem manifested for me while using the spacebar (or any other key) to toggle between 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.

It's important to remember that these 'destroyed' videos still exist somewhere in the DOM, they just have the base64 source. Triggering play/pause on subsequent videos triggered a Unhandled Promise Rejection: NotSupportedError: The operation is not supported. in the console. Using the following line suppressed that unhandled promise error.

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

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

3 Answers3