1

I'm building a video playlist. Everytime the user clicks on a new item, I would like to stop downloading the current video (if it's still in progress) before it start downloading the new video.

Here's the code I could come up with. It partially works, but it doesn't seem that any download is being cancelled when I call the destroyVideo() method. I'm using Chrome's network monitor to check that.

function createVideo(videoObject) {
    var html = '<video id="video" loop><source id="mp4" src="' + video.mp4 + '" type="video/mp4" /><source id="webm" src="' + video.webm + '" type="video/webm" /><source id="ogg" src="'+ video.ogg + '" type="video/ogg" /></video>';

    var videoContainerDiv = $('#videoContainerDiv');    
    videoContainerDiv.append(html);

    var asset = $('#video');
    asset.get(0).load();
}


function destroyVideo() {
    var asset = $('#video');

    var mp4 = $('#mp4');
    mp4.attr('src', '');

    var webm = $('#webm');
    webm.attr('src', '');

    var ogg = $('#ogg');
    ogg.attr('src', '');

    asset.attr('src', '');
    asset.get(0).load();

    var videoContainerDiv = $('#videoContainerDiv');
    videoContainerDiv.empty();
}

My question is: is there a more effective way of doing that, cross-browser?

Help is highly appreciated!

Izaias
  • 389
  • 3
  • 15

1 Answers1

1
function destroyVideo() {
    var asset = $('#video');
    asset.remove();
}
  • Same as using jQuery's empty() method. The element The element does get removed from the DOM but the video is still being downloaded in Chrome's Network Monitor. – Izaias Dec 03 '12 at 20:33
  • Have a look at this http://jsfiddle.net/axrwkr/sxCH4/ it uses an iframe to contain the video and then removes the iframe when you press the stop button. i got the idea from http://stackoverflow.com/questions/4071872/html5-video-force-abort-of-buffering it seems to stop downloading the video, but maybe i should try a few different formats and a larger file –  Dec 04 '12 at 22:20