4

I'm trying to create something where when a user clicks on a miniature version of a HTML5 video, a popup comes up which shows an enlarged version of the video (kind of like Instagram) .

However, there seems to be a strange error only in Chrome, where after I exit out of the popup and reopen it repeatedly by clicking on the blanket (about 3-5 times), the enlarged video fails to render properly in the popup (it shows up as a miniature black screen that wont play).

All other videos will also fail to enlarge properly if I click on them after that point. This occurs when I repeatedly click on a video of 3.6MB but it doesn't seem to occur when I click on a small video of 61KB so I'm not sure if the size of the file has anything to do with it.

Even stranger, when a video fails to render after repeatedly opening and closing the popups, pressing CTRL+SHIFT+i, which brings up the inspector renders the video properly. Adding a click event to the enlarged video with only alert() also renders it properly.

The mp4 file definitely plays properly prior to this happening.

Just noticed something -- the more I open and close the popups, the longer it takes Chrome to refresh the page, and it says either "Processing Request" or "Waiting for available socket" at the bottom left corner.

New Update - It seems the issue is related to sockets. I'm not really familiar with the subject, but Chrome has "6 sockets max per group". Each time I fetch the src from the smaller thumbnail video, and insert it into the larger video, through this code: 

var media_to_append=...;

It creates a new socket. This occurs for a 3.6M video and not a 61K video or images. When I reach the limit of 6 sockets for localhost, the expanded video fails to render. Strangely, CTRL+SHIFT+i removes 2 active sockets, and alert(); removes 4, allowing me to create more sockets through every video click.

Does anyone know how to fix this issue- by not creating sockets?

<div id='video_container' style='height:150px; width:150px; background:black;'>
<video style="max-width:100%; max-height:100%;">
     <source src='some_file.mp4' type="video/mp4"></source>
</video></div>

$("#video_container").click(function(){
    var src=$("#video_container").find("video").find("source").attr("src");
    var blanket=$("<div class='blanket' id='view_media_blanket' onclick='$(\"#view_media_popup\").remove(); $(this).remove();' style='z-index:15; background:#111; opacity:0.65; width:100%; height:100%; position:fixed; top:0px; left:0px;'></div>");
    $(document.body).append(blanket);
    var popup_height=600;
    var popup=$("<div id='view_media_popup' style='text-align:center; z-index:15; width:1000px; height:"+popup_height+"px; position:fixed; top:50%; left:50%; margin-left:-500px; margin-top:-300px;  background:white;'></div>");
    $(document.body).append(popup); 

    var media_to_append=$('<video class="expanded_media" data-type="video" style=" position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; cursor:pointer; max-width:100%; max-height:100%;" controls ><source  src="'+src+'"  type="video/mp4"></source></video>');

    $(media_to_append).click(function(e) {///if the rendering of the video fails, clicking on it with an alert(); or pressing CTRL SHIFT i renders it properly.
        alert();
    });

    popup.append(media_to_append);
});
B Wu.
  • 83
  • 7
  • Looks like you found a Chrome bug. Maybe try it in Canari to see if it's fixed in a more recent build. – Capsule May 07 '15 at 04:57
  • each time I create an expanded HTML video, Chrome is creating an active socket. When the number of sockets reaches 6, the HTML video rendering fails – B Wu. May 07 '15 at 05:09
  • If your page only contains the video, you can wrap it in an invisible div and show it when you click the thumbnail. – Emanuel Vintilă May 07 '15 at 05:32
  • My problem is that each HTML – B Wu. May 07 '15 at 05:44
  • Did you try creating your element using javascript's `document.createElement()`? – Emanuel Vintilă May 07 '15 at 05:48
  • What if you just hide the video tag and recycle it later with a new `src` value? That way you make sure it doesn't reach the limit of 6 sockets, even tho video tags loading files and not sockets shouldn't create sockets, obviously. – Capsule May 07 '15 at 06:07
  • Possible duplicate of [HTML5 video element request stay pending forever (on chrome)](http://stackoverflow.com/questions/16137381/html5-video-element-request-stay-pending-forever-on-chrome) – kenorb Mar 07 '16 at 21:28

1 Answers1

2

Thanks everyone for the help.

I found out that this is a bug in Chrome.

HTML5 video element request stay pending forever (on chrome)

explains how to fix the problem. It seems that each attribute has to be explicity removed and the src attr of the video must be set to false.

    if($('.expanded_source').length>0 && isChrome){ 
            $('.expanded_media').prop('src', false);
            $('.expanded_source').remove(); 
        }
        $('.expanded_media').remove();
        $("#view_media_popup").remove(); 
        $(blanket).remove();

This apparently closes the socket.

The link also has solutions to how to append multiple HTML5 videos on a page without crashing

Community
  • 1
  • 1
B Wu.
  • 83
  • 7