![](/img/trans.png)
[英]Canvas HTML5 rendering on Safari - strange results compared with Firefox and Chrome
[英]HTML5 video strange rendering error in Chrome
我正在尝试创建一些东西,当用户点击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中的一个错误。
解释了如何解决问题。 似乎必须明确删除每个属性,并且必须将视频的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视频而不会崩溃的解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.