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

И мой 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>