javascript - 如何通过 javascript 更改 html5 视频的 src 而不会崩溃 chrome 或泄漏内存？

Question

我正在开发仅在 Chrome 上运行的应用程序。

我需要能够从正在播放的视频切换源。

我已经使用 javascript (&jQuery) 来更改 src 属性:

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

它工作了几次，但我的 chrome(试用了测试版和开发 channel )最终崩溃了(页面变得无响应)。

如果我尝试在最后一个代码块之前创建一个新元素:

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

每次视频切换都会将 RAM 增加 20Mo 而不会退缩。

有没有办法跟踪/防止 chrome 在 src 更新时崩溃？有没有办法强制释放内存？

Answer 1

我也遇到过同样的问题。
我在一些论坛上读到这是 chrome 的内存泄漏错误(有人说这只发生在 chrome 8 中，在 chrome 6 中工作正常，但我没有测试它)。

我还读到 sleep 有帮助。我试过了，确实如此，如果我在更改 url 属性并调用 load() 之前先休眠，崩溃次数就会减少。但经过多次更改后仍然继续崩溃。

然后，我尝试使用 setTimeout(与 sleep 不同，它不会阻塞 CPU，让 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);

}