Question

In my web page, i have the video, it has different 3 source in it. i need to change the video src, on load the page. for that i am using this function, but i can’t get update in ipad, but firefox works fine.

jquery:

$('#task2ResultVideo source').each(function (n,s) {
       $('#task2ResultVideo').get(0).pause();
       $(this).attr('src',$(this).attr('src').replace('Task_2.4a_Host_treated', task2RslVideo));
       $(this).parents('video').get(0).load();
    } )

HTML:

<video id="task2ResultVideo" autobuffer poster="img/task2-results-host-poster.jpg">
                        <source src="Video/webm/Task_2.4a_Host_treated.webm" type="video/webm" />
                        <source src="Video/ogv/Task_2.4a_Host_treated.theora.ogv" type="video/ogg" />
                        <source src="Video/MP4/Task_2.4a_Host_treated.mp4" type="video/mp4" />
                    </video>

i am highly confused, any one help me?

I tried this, the src updating, but the video is not loaded, old video playing..
Jquery:

  $('#task2ResultVideo source').each(function (n,s) {
       $('#task2ResultVideo')[0].pause();
       $(this).attr('src',$(this).attr('src').replace('Task_2.4a_Host_treated', task2RslVideo));
       setTimeout(function(){
        $('#task2ResultVideo').load();
        },1000)
       alert($(this).attr('src').replace('Task_2.4a_Host_treated', task2RslVideo));
    } )

Answer 1

Basing off “Replacing media sequentially” at the Apple Developer site:
http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW1

In that document, it appears that Safari is looking for src on the video tag, itself, and not in the <source/> tags below it.

What about, as a simple test, trying this to see if it works:

// obviously, wrap this in a function... this is simply for testing,
// as you'll want to refine this for use by other browsers as well,
// if this works
var $vid = $("#task2ResultVideo");
var src = "Video/MP4/" + task2RslVideo + ".mp4";
$vid.attr("src", src);
$vid.get(0).load();
$vid.get(0).play();

Curious to see what results you get, as this seems to be a fairly common problem (I saw a lot of questions related to this in my Google searches, as well).

Updated… of course it would fail, because the isn’t set, duh… my bad. Really, though, your replace is fragile as well, as it would work the first time (because it knows that ‘Task_2.4a_Host_treated’ exists) but after that, it wouldn’t have a match anymore. You should build up your src string from the components you know, rather than using replace, in this case.