解决 VIDEOJS: WARN: Player "my-player" is already initialised. Options will not be applied.
VIDEOJS: WARN: Player “my-player” is already initialised. Options will not be applied.
重复使用 videoId,不能重复调用 video Player 作用于同一个 videoId
出现问题的代码
<link href="./video-js.min.css" rel="stylesheet">
<script src="./video.min.js"></script>
<script src="./lang/zh-CN.js"></script>
<div id="videoDiv">
<video id="my-player" class="video-js" data-setup="{}"></video>
</div>
var v_options = {
controls: true, // 是否显示控制条
poster: 'pic17.jpg', // 视频封面图地址
preload: 'auto',
width: 500,
height: 400,
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactivityTimeout: false,
controlBar: { // 设置控制条组件
// 设置控制条里面组件的相关属性及显示与否
'currentTimeDisplay': true,
'durationDisplay': true,
'remainingTimeDisplay': false,
volumePanel: {
inline: false
},
/* 使用children的形式可以控制每一个控件的位置,以及显示与否 */
children: [
{name: 'playToggle'}, // 播放/暂停按钮
{name: 'currentTimeDisplay'}, // 视频当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 视频播放总时间
/*{
name: 'playbackRateMenuButton', // 倍数播放,可以自己设置
'playbackRates': [0.5, 1, 1.5, 2, 2.5]
},*/
{
name: 'volumePanel', // 音量控制
inline: false // 不使用水平方式
}
]
},
sources: [ // 视频来源路径
{
src: '',
type: 'video/mp4'
}
]
};
function initH5Video(src) {
v_options.sources[0].src = src;
// 这行代码只被调用一次
h5_player = videojs('my-player', v_options, function () {
// chrome 进度显示当前播放时间
if ($.browser.chrome) {
$('.video-js .vjs-time-control').css('display', 'block');
$('.video-js .vjs-remaining-time').css('display', 'none');
}
console.log('初始化完成...', this);
});
}
可以看到 initH5Video 方法的videojs(‘my-player’, {}); 只被调用了一次,但还是出现了这个问题!
我们是不是可以每生成个 video 标签就初始化播放器呢?
修改后代码
function initH5Video(src) {
v_options.sources[0].src = src;
// 添加这行代码,使用js在页面中生成video标签
$("#videoDiv").html('<video id="my-player" class="video-js" data-setup="{}"></video>');
h5_player = videojs('my-player', v_options, function () {
// chrome 进度显示当前播放时间
if ($.browser.chrome) {
$('.video-js .vjs-time-control').css('display', 'block');
$('.video-js .vjs-remaining-time').css('display', 'none');
}
console.log('初始化完成...', this);
});
}