Safari 및 IE와의 Video.js 문제

Question

video.js를 사용하고 있으며 특정 축소판 그림을 클릭 할 때 하나의 비디오 영역이있는 페이지를 변경해야합니다. 이를 위해 다음 코드를 사용합니다 :

<video id="div_video" class="video-js vjs-default-skin" controls preload="none" width="560" height="315" poster="<?=ROOT?>media/videos/testvid_01.jpg" data-setup="{}"> 
    <source id="video_mp4" src="<?=ROOT?>media/videos/testvid_01.mp4" type="video/mp4" /> 
    <source id="video_ogg" src="<?=ROOT?>media/videos/testvid_01.ogv" type="video/ogg" /> 
    <source id="video_webm" src="<?=ROOT?>media/videos/testvid_01.webm" type="video/webm" /> 
</video> 

썸네일은 "썸네일"클래스의 일반 링크입니다. 동영상을 변경하려면 다음 코드를 사용하십시오.

$(function(){ 
    $(".thumbnail").click(function() { 
     var $target   = "testvid_"+$(this).attr("id"); 
     var $content_path = "<?=ROOT?>media/videos/"; 
     var $vid_obj  = _V_("div_video"); 

     $("img.vjs-poster").hide(); 

     $vid_obj.ready(function() { 
      $vid_obj.pause(); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".mp4"); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".ogv"); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".webm"); 
      $("img.vjs-poster").attr("src",$content_path+$target+".jpg").show(); 
      $(".vjs-big-play-button").show(); 
      $("#div_video").removeClass("vjs-playing").addClass("vjs-paused"); 
      $vid_obj.load(); 
      $vid_obj.play(); 
     }); 
    }); 

    $("#01").click(); 
}); 

여기에서 ROOT는 전체 도메인 이름입니다.

이제 Firefox와 Chrome에서 완벽하게 작동합니다. 비디오가 자동으로 재생되기 시작하고 축소판 중 하나를 클릭하면 다른 비디오로 변경됩니다. 완전한!

그러나 Safari (5.1.7) 및 IE (9)에서는 작동하지 않습니다. Safari에서는 로딩 아이콘을 무한정 보여 주며 IE에서는 시작되지 않습니다.

$ ("# 01")을 (를) 제거하면 기본적으로있는 첫 번째 동영상이 작동하지만 축소판을 클릭하면로드 아이콘이 다시 계속 표시됩니다.

IE에서는 재생이 전혀 시작되지 않습니다. 호환 모드를 사용하면 재생이 시작되지만 소리 만 재생합니다.

누구나 여기서 무엇이 잘못된지 알 수 있습니까? 감사!

Answer 1

이 시도 :

<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
    $(".thumbnail").click(function() { 
     var $target   = "testvid_"+$(this).attr("id"); 
     var $content_path = "<?=ROOT?>media/videos/"; 
     var $vid_obj  = _V_("div_video"); 

     $("img.vjs-poster").hide(); 

     $vid_obj.ready(function() { 
      $vid_obj.pause(); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".mp4"); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".ogv"); 
      $("video:nth-child(1)").attr("src",$content_path+$target+".webm"); 
      $("img.vjs-poster").attr("src",$content_path+$target+".jpg").show(); 
      $(".vjs-big-play-button").show(); 
      $("#div_video").removeClass("vjs-playing").addClass("vjs-paused"); 
      $vid_obj.load(); 
      $vid_obj.play(); 
     }); 
    }); 

    $(".thumbnail[id='01']").click(); 

});//]]> 

</script> 

이 나를 위해 작동합니다.