Safari 和 IE 的 Video.js 问题答案

【问题标题】：Video.js issue with Safari and IESafari 和 IE 的 Video.js 问题
【发布时间】：2013-02-28 13:27:46
【问题描述】：

我正在使用 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 上，它根本不开始播放。使用兼容模式时，它开始播放但只播放声音。

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

【问题讨论】：

标签： video.js

【解决方案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>

这对我有用。

【讨论】：