在灯箱内隔离闪光灯将失去先前完成的任何缓冲。解决办法？

Question

我制作了一个非常小的javascript书签(~1KB小型化)，允许我在一个没有分心的灯箱里播放视频。在我的脚本中，我克隆了包含电影的<embed>元素，并在它周围包装了一个lightbox div，所以即使在“关灯”铬扩展失败的情况下，我的也能工作。唯一的问题是，由于我克隆了<embed>，我失去了以前做过的任何缓冲。这是一个重大的失误，因为我在一个缓慢的连接，我不总是记得加载书签之前，玩- UX是完全可怕的。

有没有办法改进脚本，这样我就可以将<embed>隔离在光明盒中，而不会丢失以前完成的任何缓冲？

下面是我的书签代码(您可以在本站上试用)--在页面上的任意<embed>元素旁边放置一个图标，您可以单击该图标将该<embed>隔离到一个无分心的灯箱中：

javascript:(function(){
var isolated = false, smallestVideo=300, videoElements=document.getElementsByTagName('embed'), activate_style='width:16px; height:16px; position:relative; cursor:pointer; left:-23px; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAcHBwjHyAAAAAkHyErKysjHyAkHyEkJCQkHyEkISElISEiHyAzMzMjICEkHyEgICAjHyAkHyAuLi4jICE4NDUjHyD08/MnIyREQEEkICH////z8/NDP0AmIiN6d3irZqRxAAAAFXRSTlMACfYC8wb8qweNRkX1CvibCPX0C/d4B0jeAAAAi0lEQVQY02VPWRKFMAijm7VWrfrs4n7/W0qX54xjfoBAIAAgmCAIwaCgbiSnlMumzvXP0MohqlZ1qa96V9CbAfV6ivmamFEzEDLOh8WeUSUFEB7ry+9XwIQTIBSj9dvmD5TRTKxHJKzLRJbs/i/JS0+7hLKU6dE9dyc8C4N5jM0qme9U+7L+fe79/g3f2AzxgGRvowAAAABJRU5ErkJggg==) no-repeat center center';
for (var i = 0; i < videoElements.length; i++) {
    var video = videoElements[i];
    if (video.width < smallestVideo || video.height < smallestVideo) {
        continue;
    }
    var activate = document.createElement('div');
    activate.setAttribute('id','curtain');
    activate.setAttribute('style', activate_style);
    activate.style.top = '-'+ (video.clientHeight + 3) + 'px';
    video.parentNode.insertBefore(activate, video.nextSibling);
    activate.onclick = isolate;
}

function isolate() {
    if(!isolated) {
        var theatre_style = 'position:fixed; background-color:#000; z-index:99999; width:100%; height:100%; left:0; top:0; text-align:center; line-height:100%', off_style='display:none;', on_style='display:block;';
        var orig_video = this.previousSibling;
        var theatre_div = document.createElement('div');
        theatre_div.setAttribute('style', theatre_style);
        theatre_div.onclick = function() { 
            this.setAttribute('style', off_style); 
            this.removeChild(clonevideo); 
            isolated = false; 
            orig_video.setAttribute('style', on_style); 
        };
        document.getElementsByTagName('body')[0].appendChild(theatre_div);
        var clonevideo = orig_video.cloneNode(true);
        theatre_div.appendChild(clonevideo);
        orig_video.setAttribute('style', off_style);
        clonevideo.setAttribute('style', 'position:relative; top:50px;');
        var video_frame = document.createElement('div');
        theatre_div.appendChild(video_frame);   
        video_frame.onclick = function(e) { e.stopPropagation(); };
        clonevideo.onclick = function(e) { e.stopPropagation(); };
        isolated = true;
    }
}
})();

我衷心欢迎在除缓冲问题之外的其他领域改进脚本的建议，但我鼓励您将其作为评论而不是作为答案。

Answer 1

编辑:这些第一次引用的建议不起作用。作为一个很可能行不通的例子。

而不是克隆，只需尝试移动具有如下函数的节点：function move(obj, dest){dest.appendChild(obj.parentNode.removeChild(obj));}。 如果这不起作用，尝试在整个页面上放置一个黑色div层，并修改embed对象的z索引，使其位于该div层之上。如果不起作用..。

创建4个黑色div层对齐，以覆盖整个页面，除了嵌入对象。

或者将css应用到页面上，以打开所有链接、所有div、所有的黑色和使用！重要的是，它可以超越所有其他样式。为此，创建一个可以应用于每个元素的类。稍后，您可以从每个元素中删除该类，以将页面还原到以前的状态。使用jQuery，它将类似于$('*').addClass('blackout') and $('*').removeClass('blackout')

您可以用以下内容替换或合并建议2：

$('input').remove();
$('iframe').remove();
$('img').remove();
$('a').remove();
$('embed').not(theVideoIWant).remove();
$('object').not(theVideoIWant).remove();