解决 VIDEOJS: WARN: Player “my-player“ is already initialised. Options will not be applied._videojs: warn: player "videoplayer2" is already in

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>
1
2
3
4
5
6
7

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);
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

可以看到 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);
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13