Jquery Mobile Single Page App + Video + Dynamic Changing Video

Has anybody found a robust way to change the source of a video element dynamically and make it work on Iphone? My testing works fine in Chrome, but I can not make it work consisten

Solution 1:

You are missing the closing parenthesis }); for your $('#button1').click(function(){. The javascript should be :

$('#one').live("pageinit", function(event, data) {

    var player1 = new MediaElementPlayer('#player1', {});

    $('#button1').click(function() {
        player1.pause();
        player1.setSrc([
            {
            src: "http://dev.swinginsam.com/_files/testvid_01.mp4"},
        {
            src: "http://dev.swinginsam.com/_files/testvid_01.webm",
            type: 'video/webm; codecs="vp8, vorbis"'},
        {
            src: "http://dev.swinginsam.com/_files/testvid_01.ogv",
            type: 'video/ogg; codecs="theora, vorbis"'}
        ]);

    });

    $('#button2').click(function() {
        player1.pause();
        player1.setSrc([
            {
            src: "http://dev.swinginsam.com/_files/testvid_02.mp4"},
        {
            src: "http://dev.swinginsam.com/_files/testvid_02.webm",
            type: 'video/webm; codecs="vp8, vorbis"'},
        {
            src: "http://dev.swinginsam.com/_files/testvid_02.ogv",
            type: 'video/ogg; codecs="theora, vorbis"'}
        ]);
        player1.load();
    });

});​