Can't get Video.js plugin to work

Question

I'm able to get Video.JS working but I'm not able to get the Resolution Switcher plugin working.

I just don't know where to put the code to get it work I think

I put this in my <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>

I'm using this code for where the video will be displayed

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

I put this right before my <body> ends

<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>

And this is placed afterwards

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

})

And this is the error I get in the console

and nothing is playing.

Aᴍɪʀ · Accepted Answer · 2015-12-23T02:51:50.540

6

According to the code posted on their github, the first line should be:

var player = videojs('video', {

And probably, into the callback function, instead of referring to player, you can just use 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())
    })

})

edited Dec 23 '15 at 02:51

answered Dec 23 '15 at 02:40

Aᴍɪʀ

7,623
3
38
52

You are god's gift to mankind. Another quick question though, how can I set the max width and or height? – CodingIsHardForMe Dec 23 '15 at 02:50
@CodingIsHardForMe You're welcome :) Consider upvoting and marking this as the answer for future visitors. :) – Aᴍɪʀ Dec 23 '15 at 02:52
1

@CodingIsHardForMe That's another question, but I believe you can use CSS for those kind of things. Look at [this question](http://stackoverflow.com/questions/18169473/video-js-size-to-fit-div). – Aᴍɪʀ Dec 23 '15 at 02:54

Can't get Video.js plugin to work

1 Answers1