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

我的html在body标记内：

<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>

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

2 个答案: