Chrome中的HTML5视频奇怪的呈现错误 [英] HTML5 video strange rendering error in Chrome

问题描述

我尝试创建一些内容，当用户点击HTML5视频的缩略版时，弹出窗口会显示视频的放大版本（类似Instagram）。不过，Chrome浏览器似乎只有一个奇怪的错误，那就是在退出弹出窗口之后，点击毯子重复打开它（约3-5次时间），放大的视频无法在弹出窗口中正确呈现（它显示为无法播放的微型黑色屏幕）。

如果我在点之后点击它们，所有其他视频也将无法正常放大。当我重复点击一个3.6MB的视频时，会出现这种情况，但是当我点击一个61KB的小视频时，似乎没有出现这种情况，所以我不确定文件的大小是否与它有关。 b
更奇怪的是，当视频在重复打开和关闭弹出窗口后无法呈现时，请按 CTRL + SHIFT + i ，这会使检查员正确地呈现视频。仅使用alert（）将放大的视频添加到单击事件中也会正确呈现它。

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

刚刚注意到了什么 - 我打开和关闭弹出窗口的次数越多，Chrome浏览器刷新页面所花费的时间越长，并且它表示处理请求或等待可用套接字左下角。

新更新 - 看起来问题与套接字有关。我对这个主题并不十分熟悉，但Chrome有每组最多6个插槽。每当我从较小的缩略图视频中获取 src ，并通过以下代码将其插入到较大视频中：

  var media_to_append = ...; 
  

它创建一个新的套接字。这发生在3.6M视频而不是61K视频或图像。当达到本地主机的6个套接字的限制时，展开的视频无法呈现。奇怪的是， CTRL + SHIFT + i 删除了2个活动套接字， alert（）; 删除4，允许我通过每个视频点击创建更多的套接字。

有谁知道如何解决这个问题 - 通过不创建套接字？

 < div id ='video_container'style ='height：150px;宽度：150像素;背景：黑色;> 
< 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_mediadata -type =videostyle =position：absolute; left：0px; right：0px; to p：0px; bottom：0px; margin：auto; cursor：pointer;最大宽度：100％;最大高度：100％;控件>< source src ='+ src +'type =video / mp4>< / source>< / video>'）; 
 
 $（media_to_append）.click（function（e）{///如果视频渲染失败，用alert（）单击它;或者按下CTRL SHIFT，我会正确渲染它
 alert（） ; 
}）; 
 
 popup.append（media_to_append）; 
}）; 
  

解决方案

感谢大家的帮助。

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

HTML5视频元素请求永远保持悬而未决（在Chrome浏览器上）

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

  if（$（'。expanded_source'）。length> 0& amp ;& isChrome）{
 $（'。expanded_media'）。prop（'src'，false）; 
 $（'。expanded_source'）。remove（）; 
} 
 $（'。expanded_media'）。remove（）; 
 $（＃view_media_popup）。remove（）; 
 $（毛毯）.remove（）; 
  

这显然会关闭套接字。

该链接还提供了解决方案，以便如何在页面上添加多个HTML5视频而不会崩溃

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

解决方案

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

这篇关于Chrome中的HTML5视频奇怪的呈现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！