如何通过 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（尝试过 beta 和 dev 通道）最终崩溃（页面变得无响应）。

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

$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 中工作正常，但我没有测试它）。

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

然后，我尝试使用 setTimeout （与睡眠不同，它不会占用 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);

}

Answer 2

我讨厌所有这些答案，因为它们太短或依赖于其他框架。

这是执行此操作的“一种”vanilla 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 3

我认为第一种方法应该可以正常工作，而 Chrome 的 实现仍然存在错误。请随意在他们的错误报告论坛上提及它。

Answer 4

我遇到了这个问题，所以我所做的就是删除视频标签，然后“即时”添加另一个具有当前网址的标签。