Question

我试图创造一些东西，当用户点击HTML5视频的微型版本时，会出现一个弹出窗口，显示视频的放大版本（有点像Instagram）。

然而，仅在Chrome中出现了一个奇怪的错误，在我退出弹出框并通过单击毯子重复打开它（大约3-5次）之后，放大的视频无法在弹出窗口（它显示为不会播放的微型黑屏）。

如果我在此之后点击它们，所有其他视频也将无法正确放大。当我反复点击3.6MB的视频时会发生这种情况，但是当我点击61KB的小视频时似乎不会发生这种情况，因此我不确定该文件的大小是否与它。

更奇怪的是，当视频在重复打开和关闭弹出窗口后无法渲染时，按 CTRL + SHIFT + i ，这会带来检查员正确地渲染视频。仅使用alert（）向放大的视频添加点击事件也可以正确呈现。

在发生这种情况之前，mp4文件肯定会正常播放。

只是注意到了一些事情 - 我打开和关闭弹出窗口的次数越多，Chrome刷新页面的时间就越长，并且它会显示＆＃34;处理请求＆＃34;或者＆＃34;等待可用的套接字＆＃34;在左下角。

新更新 - 似乎问题与套接字有关。我并不是很熟悉这个主题，但Chrome每组最多有＃34; 6个套接字＆＃34;。每次我从较小的缩略图视频中获取src，并通过以下代码将其插入较大的视频中：

var media_to_append=...;

它创建一个新的套接字。对于3.6M视频而不是61K视频或图像，会发生这种情况。当我达到localhost的6个套接字的限制时，扩展的视频无法呈现。奇怪的是， CTRL + SHIFT + i 删除2个活动套接字，alert();删除4个，允许我创建更多套接字视频点击。

有没有人知道如何解决这个问题 - 不创建套接字？

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

Answer 1

感谢大家的帮助。

我发现这是Chrome中的一个错误。

HTML5 video element request stay pending forever (on chrome)

解释了如何解决问题。似乎必须明确删除每个属性，并且必须将视频的src attr设置为false。

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

这显然关闭了套接字。

该链接还提供了如何在不崩溃的情况下在页面上附加多个HTML5视频的解决方案

Chrome中的HTML5视频奇怪渲染错误

1 个答案: