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