无法使 Video.js 插件工作

Question

我可以让 Video.JS 工作，但我无法让 Resolution Switcher 插件工作。

我只是不知道把代码放在哪里才能让它工作我想

我把这个放在我的 <head>

<link href="http://vjs.zencdn.net/5.4.4/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>

我将此代码用于显示视频的位置

<video id='video' class="video-js vjs-default-skin"></video>

我把这个放在 <body> 结束前

<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>
<script src="assets/js/video.js"></script>
<script src="assets/js/videojs-resolution-switcher.js"></script>

这是放在后面的

videojs('video', {
    controls: true,
    plugins: {
        videoJsResolutionSwitcher: {
            default: 'high',
            dynamicLabel: true
        }
    }
}, function() {

    // Add dynamically sources via updateSrc method 
    player.updateSrc([{
        src: 'videos/intros/Intro480_30_Condensed.mp4',
        type: 'video/mp4',
        label: '480'
    }, {
        src: 'videos/intros/Intro720_30_Condensed.mp4',
        type: 'video/mp4',
        label: '720'
    }])

    player.on('resolutionchange', function() {
        console.info('Source changed to %s', player.src())
    })

})

这是我在控制台中得到的错误

没有播放任何内容。

Answer 1

根据their github上发布的代码，第一行应该是：

var player = videojs('video', {

或许，在回调函数中，您可以直接使用 this.

而不是引用 player

var player = videojs('video', {
    controls: true,
    plugins: {
        videoJsResolutionSwitcher: {
            default: 'high',
            dynamicLabel: true
        }
    }
}, function() {

    // Add dynamically sources via updateSrc method 
    this.updateSrc([{
        src: 'videos/intros/Intro480_30_Condensed.mp4',
        type: 'video/mp4',
        label: '480'
    }, {
        src: 'videos/intros/Intro720_30_Condensed.mp4',
        type: 'video/mp4',
        label: '720'
    }])

    this.on('resolutionchange', function() {
        console.info('Source changed to %s', this.src())
    })

})

无法使 Video.js 插件工作

Can't get Video.js plugin to work

javascript

video.js