Android browser cache and javascript

Question

Hi I have a mobile website which plays videos using the html5 video element.

I have a playlist of links which change the src attribute on the video using jquery.

var video = $("video").get(0);
video.src = $(this).data('src');

This works on iPhone, iPad, firefox (PC) chrome (PC) Andriod Motorola Xoom tablet and Opera on Andriod. However the default browser on Andriod does not change the src and plays the original src video file that was setup on page load.

I have tried on Samsung S2 and HTC Inspire both with Gingerbread.

I am not keen on the idea of adding CACHE-CONTROL meta tags as I need this page to load quickly especially on mobile devices.

Is there a better way to do this in js or some way to break the cache for this element?

Thanks

Answer 1

Found the solution: video.load(); before video.play();

var video = $("video").get(0);
video.src = $(this).data('src');
video.load();
video.play();

Answer 2

I ran into the same problem. It's better to play the video after the video has been loaded.

A better solution is to add an eventListener on when the video is loaded. So the video plays at the moment it's loaded an not while it maybe is still loading.

var video = $("video").get(0);
video.src = $(this).data('src');
video.load();

video.on("loadeddata",function(){
    video.play();
});