Как я могу изменить src видео html5 через javascript без сбоя chrome или утечки памяти?

Question

Я работаю над приложением, работающим только на Chrome.

Мне нужно иметь возможность переключать источник с воспроизводимого видео.

Я использовал javascript (& jQuery) дляизмените атрибут src:

$fullscreenVideo.get(0).src = '/video/' + name + '.mp4'; // crash here
$fullscreenVideo.get(0).load();
$fullscreenVideo.get(0).play();

Это работает несколько раз, но мой Chrome (пробные каналы beta и dev) заканчивается сбоем (страница перестает отвечать).

Если я пытаюсьсоздайте новый элемент с последним последним кодовым блоком с помощью:

$fullscreenVideo.remove();
$fullscreenVideo = $('<video id="video-fullscreen" width="800" height="600" loop="loop"></video>').appendTo("#page-fullscreen > div.fullscreen");

Каждый видеопереключатель увеличивает ОЗУ на 20Мо, даже не возвращаясь.

Есть ли способ отследить / предотвратить сбой Chrome en src update?Есть ли способ заставить свободную память?

Answer 1

Я ненавидел все эти ответы, потому что они были слишком короткими или полагались на другие фреймворки.

Вот "один" ванильный способ JS сделать это, работая в Chrome, пожалуйста, протестируйте в других браузерах:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

   source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Answer 2

У меня была такая же проблема.
Я читал в некоторых foruns, что это ошибка Chrome с утечками памяти (некоторые люди говорят, что это просто происходит в Chrome 8 и в Chrome 6 работает нормально, но я не тестировалэто).

Я также читал, что использование сна помогает.Я пытался, и это правда, если я поставлю сон перед изменением атрибута URL и вызовом load (), число сбоев уменьшится.Но все еще продолжает падать после многих изменений.

Затем я попытался использовать setTimeout (в отличие от режима сна, он не блокирует процессор, оставляя его свободным для работы chrome).

И этоработает в настоящее время.Попробуй посмотреть, поможет ли мой код.

var videoChangingPending = false;
function changeMovieSource(url, title){

        var $video = $('#video');
        try {
            document.getElementById('video').src = url;
        }
        catch (e) {
            alert(e);
        }     

        $video.attr('autoplay', 'true');
        $video.data('currentTitle', title);

        document.getElementById('video').load();

        videoChangingPending = false;
}    

function startPlayer(url, title) {

        if(videoChangingPending == true) 
            return;



        document.getElementById('video').pause();


        videoChangingPending = true;
        var changeMovieCallback = function(){ changeMovieSource(url, title);}
        var t = setTimeout(changeMovieCallback, 800);

}

Answer 3

Я бы предположил, что первый способ должен работать нормально, а реализация Chrome <video> все еще не работает.Не стесняйтесь упоминать об этом на своих форумах с сообщениями об ошибках.

Answer 4

Я столкнулся с этой проблемой, поэтому все, что я сделал, это удалил тег видео, а затем добавил еще один с текущим URL "на лету".