【问题标题】:Can't get Video.js plugin to work无法让 Video.js 插件工作
【发布时间】:2015-12-23 02:24:21
【问题描述】:

我可以让 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>

我正在使用此代码来显示视频的位置

&lt;video id='video' class="video-js vjs-default-skin"&gt;&lt;/video&gt;

我把这个放在我的&lt;body&gt; 结束之前

<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())
    })

})

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

什么都没有播放。

【问题讨论】:

    标签: javascript video.js


    【解决方案1】:

    根据their github上贴的代码,第一行应该是:

    var player = videojs('video', {
    

    并且可能,进入回调函数,而不是引用player,你可以直接使用this。

    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())
        })
    
    })
    

    【讨论】:

    • 你是上帝送给人类的礼物。不过,另一个快速的问题是,如何设置最大宽度和或高度?
    • @CodingIsHardForMe 不客气 :) 考虑投票并将其标记为未来访问者的答案。 :)
    • @CodingIsHardForMe 这是另一个问题,但我相信您可以将 CSS 用于此类事情。看this question。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-26
    • 2015-04-22
    相关资源
    最近更新 更多