Изоляция вспышки внутри лайтбокса теряет всю буферизацию, сделанную ранее.Обходной путь? - PullRequest
Новая
       14

Изоляция вспышки внутри лайтбокса теряет всю буферизацию, сделанную ранее.Обходной путь?

0 голосов
/ 11 марта 2012

Я сделал очень минимальный javascript bookmarklet (уменьшенный ~ 1 КБ), который позволяет мне воспроизводить видео внутри лайтбокса без отвлекающих факторов.В моем сценарии я клонирую элемент <embed>, содержащий фильм, и обертываю вокруг него блок лайтбокса, поэтому даже в тех случаях, когда расширение хрома «Turn Lights Off» не работает, мой работает.Единственная проблема заключается в том, что, поскольку я клонирую <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;
    }
}
})();

Я искренне приветствую предложения по улучшению сценария в других областях, кроме проблемы буферизации, но я призываю вас публиковать их как комментарии, а не как ответы.

1 Ответ

0 голосов
/ 11 марта 2012

Отредактировано: эти первые процитированные предложения не сработали.Приведенный в качестве примера того, что, вероятно, не будет работать.

Вместо клонирования просто попробуйте переместить узел с помощью функции, подобной: function move(obj, dest){dest.appendChild(obj.parentNode.removeChild(obj));}

Если это не такпопробуйте разместить черный слой div на всей странице и измените z-индекс объекта внедрения так, чтобы он находился над этим слоем div.Если это не сработает, ...

Создайте 4 черных div-слоя, выровненных по всей странице, за исключением встроенного объекта.

Или примените css к странице, чтобы повернуть всессылки, все элементы, все черное и используйте! важно переопределить все другие стили.Для этого создайте отдельный класс, который можно применять к каждому элементу.Позже вы можете удалить этот класс из каждого элемента, чтобы восстановить страницу в прежнем состоянии.Используя jQuery, это будет что-то вроде $('*').addClass('blackout') and $('*').removeClass('blackout')

. Вы можете заменить или объединить предложение №2 с чем-то вроде этого: 

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