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

Posted

技术标签:

【中文标题】Chrome中的HTML5视频奇怪的渲染错误【英文标题】:HTML5 video strange rendering error in Chrome 【发布时间】:2015-07-17 11:00:39 【问题描述】:

我正在尝试创建一些东西,当用户单击 html5 视频的微型版本时,会弹出一个显示视频放大版本的弹出窗口(有点像 Instagram)。

但是,似乎只有 Chrome 出现了一个奇怪的错误,在我退出弹出窗口并通过单击毯子反复重新打开它(大约 3-5 次)后,放大的视频无法在弹出窗口(它显示为不会播放的微型黑屏)。

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

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

在发生这种情况之前,mp4 文件肯定可以正常播放。

刚刚注意到一件事——我打开和关闭弹出窗口的次数越多,Chrome 刷新页面的时间就越长,并且在左下角显示“正在处理请求”或“等待可用套接字”。

新更新 - 问题似乎与套接字有关。我不太熟悉这个主题,但 Chrome 有“每组最多 6 个套接字”。每次我从较小的缩略图视频中获取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);
);

【问题讨论】:

您似乎发现了 Chrome 错误。也许在 Canari 中尝试一下,看看它是否在更新的版本中得到修复。 每次我创建扩展的 HTML 视频时,Chrome 都会创建一个活动套接字。当socket数达到6时,HTML视频渲染失败 如果您的页面只包含视频,您可以将其包裹在一个不可见的 div 中,并在单击缩略图时显示。 我的问题是每个 HTML 您是否尝试使用 javascriptdocument.createElement() 创建您的元素? 【参考方案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视频奇怪的渲染错误的主要内容,如果未能解决你的问题,请参考以下文章

Chrome/PC 中的 HTML5 视频

Chrome Html5 视频无法显示白色,背景为灰色

Safari 和 Chrome 中的 HTML5 视频海报属性

Chrome:拥有 HTML5 视频位置:固定或绝对导致所有背景附件:固定中断

Chrome 中的 HTML5 视频 currentTime 重绘问题

用于数字标牌的 Chrome 中的 HTML5 视频自动播放