How do i change the src of an html5 video via javascript without either crashing chrome or leak memory?

Question

I'm working on an application running on Chrome only.

I need to be able to switch the source from a playing video.

I've used javascript (&jQuery) to change the src attribute :

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

It works a few times but my chrome (tried beta & dev channels) ends up crashing (page become unresponsive).

If i try to create a new element prepending last codeblock with :

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

Every video switch increase RAM by 20Mo without ever getting back down.

Is there a way to trace/prevent chrome crash en src update ? Is there a way to force free memory ?

Answer 1

I've been the same problem.
I read in some foruns that is a chrome's bug with memory leaks (some people say that just happens in chrome 8 and in chrome 6 works fine, but i didn't test it).

I also read that using a sleep helps. I tried and it is true, if i put a sleep before change url atribute and call load() the crashes number decreases. But still continues to crash after many changes.

Then, i tried to use setTimeout (unlike sleep, it doesn't bloq CPU, leaving it free to chrome's work).

And it is working now. Try to see if my code helps.

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);

}