我有一个像这样的视频网址对象:
var urls = new Object();
urls['cail_ivt'] = {'mp4_url': http://link_to_.mp4', 'webm_url': 'http://link_to_.webm', 'flv_url': 'http://link_to_.flv' };
urls['cail_ty'] = {'mp4_url': 'http://link_to_.mp4', 'webm_url': 'http://link_to_.webm', 'flv_url': 'http://link_to_.flv' };
urls['cail_1'] = {'mp4_url': 'http://link_to_.mp4', 'webm_url': 'http://link_to_.webm', 'flv_url': 'http://link_to_.flv' };
urls['cail_2'] = {'mp4_url': 'http://link_to_.mp4', 'webm_url': 'http://link_to_.webm', 'flv_url': 'http://link_to_.flv' };
urls['cail_3'] = {'mp4_url': 'http://link_to_.mp4', 'webm_url': 'http://link_to_.webm', 'flv_url': 'http://link_to_.flv' };
_V_.options.flash.swf = 'http://static_server/video-js.swf';
我有一堆锚标记,其id是urls对象的关键字:
然后我写了一些js来绑定那些锚点击并将相应的视频加载到播放器div并显示它。它从不显示也不播放。这似乎只发生在ie9。
$('ul a.play_button').click(function() {
var campaign_id = $(this).attr('id');
var mp4_url = urls[campaign_id].mp4_url;
var webm_url = urls[campaign_id].webm_url;
var flv_url = urls[campaign_id].flv_url;
var video_player = '<video id="video" class="video-js vjs-default-skin" controls preload="none" width="640" height="360" poster="" data-setup="{}"> '
+ '<source id="mp4" src="'+mp4_url+'" type="video/mp4" />'
+ '<source id="flash" src="'+flv_url+'" type="video/flv" />'
+ '<source id="webm" src="'+webm_url+'" type="video/webm" />'
+ '</video>';
$('#player').empty();
$('#player').html(video_player);
});
不确定这是否是处理播放器中多个视频的最佳方式,但这是我想出的。讨论和帮助非常感谢。
答案 0 :(得分:0)
与我在videojs的另一个问题类似。我必须向播放器声明一个变量集:
var mplayer = _V_('video');
当我在同一页面上加载其他视频时,我只是暂停播放器,将其倒回到视频的开头并设置新的视频源:
mplayer.pause();
mplayer.currentTime(0);
mplayer.src([{ type: "video/mp4", src: mp4_url },{ type: "video/webm", src: webm_url },{ type: "video/flv", src: flv_url }]);