Safari和IE浏览器的Video.js问题

问题描述：

我使用的是video.js，我有一个页面，其中一个视频区域在点击某些缩略图时必须更改。为此，我使用以下代码：Safari和IE浏览器的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”）。click（）;,第一个视频（默认是有的话）可以工作，但是当点击任何缩略图时，它只会再次显示加载图标。

在IE上，它根本不开始播放。当使用兼容模式时，它开始播放，但只播放声音。

有人知道这里有什么问题吗？谢谢！

答

试试这个：

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

这对我的作品。

Safari和IE浏览器的Video.js问题

相关推荐