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”）。click（）;时，第一个视频（默认存在）确实有效，但是当点击任何缩略图时，它只会再次显示加载图标。

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

这适合我。

Video.js与Safari和IE有关

1 个答案: