我正在使用 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 上,它根本不开始播放。使用兼容模式时,它开始播放但只播放声音。
有人知道这里有什么问题吗?谢谢!