Question

I’ve been trying to use jQuery to switch the video playing on an iPad by clicking a link. It works fine in a browser, however when I try it on the iPad it just pauses the video and doesn’t load the other one.

// switch video sources on the fly
    //

}).on('click', '.video-nav a', function(e){

    // pause the current video
    //
    $("#" + $(this).attr("data-video-id"))[0].pause();

    // change the source of the video in question
    //
    $("#" + $(this).attr("data-video-id") + " > source").attr("src", $(this).attr("data-video"));


    // load the new source
    //
    $("#" + $(this).attr("data-video-id"))[0].load();


    // play the new video
    //
    $("#" + $(this).attr("data-video-id"))[0].play();

    // make the button's parent "active" by adding it as a class
    //
    $(this).parent().addClass("active").siblings().removeClass("active");


});

and this is how I have my html set up:

<video id="non" width="444" height="339" controls="true" preload="false" poster="images/image1.png">
                <source src="videos/video1.mp4" type='video/mp4' />
            </video>        

            <div class="video-nav">

                <ul>
                    <li class="active"><a class="fourty-ten-ten" href="#" rel="external" data-video="videos/video1.mp4" data-video-id="non" data-poster="images/image1.png"></a></li>

                    <li><a class="fourty-ten-twenty" href="#" rel="external" src="" data-video="videos/video2.mp4" data-video-id="non" data-poster="images/image2.png"></a></li>
                </ul>
            </div>

Answer 1

So for anyone looking, here is a solution to change the video source on an iPad:

html is set up like this:

<div class="vid-wrapper">
   <video id="video" data-vid="video" controls preload="none">
      <source src="videos/video1.mp4" type='video/mp4' />
   </video>

   <a data-vid="video1.mp4">&nbsp;</a>
   <a data-vid="video2.mp4">&nbsp;</a>
</div>

and the jQuery is set up like this:

$(document).on('click', 'a[data-vid]', function(){
        var $this = $(e.target),
            video = $this.attr('data-vid'),
            newVid = $this.siblings('video');

        // pause the current video
        newVid[0].pause();
        // change the source of the video in question
        newVid.attr('src', 'videos/' + video);
        // load the new source
        newVid[0].load();
        // play the new video
        newVid[0].play();

});

Hope this helps anyone in need!