HTML 5 动态加载的视频导致 iPad 出现黑屏

Question

我通过更改代码中的video 标签的src 来动态加载视频。当我在 ipad 上尝试我的代码时（不知道它是否在模拟器中工作），第一个视频播放正常，但下一个视频只是给我一个黑屏。我试过先播放第二个视频（检查编码问题），它可以正常播放。

这是我加载/播放视频的 javascript 函数：

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);
}

从我的代码中调用，例如：

$('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++;
});

还有我在body标签内的html：

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

我尝试在每次播放后删除video 标签并再次插入，但没有效果。欢迎提出想法！ :)

Answer 1

这不是您确切问题的解决方案，但概念已经存在，您应该能够将其调整为您自己的代码（当然，我不知道的全部范围）。下面的代码是我为了加载 VIDEO 元素并在当前视频源完成后自动播放队列中的下一个视频源而编写的。

我使用 timeupdate 来检查视频是否“接近”结束而不是仅仅寻找结束的事件的原因是，结束的事件在旧设备（例如原始 iPad）上是出了名的不可靠。当然，如果你愿意，你可以使用结束的事件。

(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);

如果这对您有帮助或有任何问题，请告诉我。

Answer 2

你可以使用

<video onended="javascript:on_video_ended();"></video>
<script>
function on_video_ended(){
    //javascript code goes here.
}
</script>