Question

I’m loading in videos dynamically by changing the video tag’s src in code. When I try my code on an ipad (no idea if it works in the simulator or not), the first video plays fine but the next one just gives me a black screen. I have tried playing the second video first (to check for encoding issues) and it plays fine.

Here is my javascript function that loads/plays the video:

function loadVideo(video_path){  
    var vid = document.getElementById('v');

    vid.src = video_path;
    vid.load();

    // play the video once it has loaded
    vid.addEventListener('canplaythrough', function(e){
        vid.style.display = "block";
        vid.play();
    }, false);

    // hide the video container once the video has finished playing
    vid.addEventListener('ended', function(e){
        vid.style.display = "none";
    }, false);
}

Called from my code like:

$('a').click(function(){
    switch(video){
        case 0:
            loadVideo('path/to/myvideo.mp4');
            break;
        case 1:
            loadVideo('path/to/myvideo2.mp4');
            break;
        case 2:
            loadVideo('path/to/myvideo3.mp4');
            break;
        // etc
    }

    video++;
});

And my html inside the body tag:

<video id="v" type="video/h264" width="960" height="500"></video>

I have tried removing the video tag after each play and inserting it in again but that had no effect. Ideas welcome! 🙂

Answer 1

This isn’t a solution for your exact question, but the concepts are there and you should be able to adjust it to your own code (the full extent of which I’m not privy to, of course). The following code is something I put together to have the VIDEO element load in and play the next video source in a queue automatically after the current video source is done.

The reason I use timeupdate to check for the video being “near” the end instead of just looking for the ended event is because the ended event is notoriously unreliable on older devices (such as the original iPad). You can use the ended event if you so wish, of course.

(function ($) {
    var srcs = [
        "video1.mp4",
        "video2.mp4",
        "video3.mp4",
        "video4.mp4"
    ],
    index = 0,
    $video = $("#vid").attr("src", srcs[index]).bind("timeupdate", timeUpdateHandler),
    video = $video.get(0);

    function timeUpdateHandler(e) {
        if (video.currentTime >= (video.duration - 0.1)) {
            nextVideo();
        }
    }

    function nextVideo() {
        index++;
        if (index === srcs.length) {
            index = 0;
        }
        $video.attr("src", srcs[index]);
        video.play();
    }
})(jQuery);

Let me know if this helps you or if you have any questions.