我正在尝试创建一些东西,当用户单击 HTML5 视频的微型版本时,会出现一个弹出窗口,其中显示视频的放大版本(有点像 Instagram)。
然而,似乎只有在 Chrome 中才会出现一个奇怪的错误,当我退出弹出窗口并通过单击毯子反复重新打开它(大约 3-5 次)时,放大的视频无法在弹出窗口中正确呈现(它显示为无法播放的微型黑屏)。
如果我在那之后点击所有其他视频,它们也将无法正确放大。当我反复点击3.6MB的视频时会出现这种情况,但当我点击61KB的小视频时似乎不会出现这种情况,所以我不确定文件的大小是否与此有关。
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.
在发生这种情况之前,mp4 文件肯定可以正常播放。
刚刚注意到一些事情 - 我打开和关闭弹出窗口的次数越多,Chrome 刷新页面所需的时间就越长,并且它在左下角显示“正在处理请求”或“等待可用套接字”。
新更新- 看来问题与套接字有关。我不太熟悉这个主题,但 Chrome 有“每组最多 6 个套接字”。每次我获取src
通过以下代码,将较小的缩略图视频插入到较大的视频中:
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.
有谁知道如何通过不创建套接字来解决这个问题?
<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);
});