HTML 5 동적으로로드 된 동영상이 iPad에서 검은 색 화면을 표시합니다.

Question

코드에서 video 태그의 src을 변경하여 동영상을 동적으로로드합니다. ipad에서 코드를 시도 할 때 (시뮬레이터에서 작동하는지 여부는 알 수 없음) 첫 번째 비디오는 정상적으로 재생되지만 다음 코드는 나에게 검은 화면을 제공합니다. 두 번째 비디오를 먼저 (인코딩 문제를 확인하기 위해) 재생 해 보았고 정상적으로 재생됩니다.

$('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> 

처럼 내 코드에서

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

를 호출 : 여기

는로드/비디오를 재생하는 내 자바 스크립트 함수입니다

나는 각 카드를 재생하고 삽입 한 후에 video 태그를 제거해 보았습니다. 다시는 효과가 없었습니다. 아이디어 환영! :)

Answer 1

이것은 정확한 질문을위한 해결책은 아니지만 개념이 있으며 사용자가 직접 코드에 맞게 조정할 수 있어야합니다. . 다음 코드는 현재 비디오 소스가 완료된 후 VIDEO 요소를로드하고 다음 비디오 소스를 큐에서 자동으로 재생하도록하기 위해 함께 사용한 것입니다.

종료 된 이벤트가 이전 장치 (예 : 원래 iPad)에서 신뢰할 수 없다고 악명이 높기 때문에 종료 된 이벤트를 찾는 대신 "가까운"비디오가 있는지 확인하기 위해 timeupdate를 사용하는 이유가 있습니다. 물론 원할 경우 종결 된 이벤트를 사용할 수 있습니다.

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