manelpb / videojs-qualityselector

Simple plugin that displays a dropdown with a list of possible videos based on its resolution, also changes the source when the user selects a desired option

videojs-qualityselector

Simple plugin that displays a dropdown with a list of possible videos based on its resolution, also changes the source when the user selects a desired option

Installation

npm install --save videojs-qualityselector

Usage

To include videojs-qualityselector on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-qualityselector.min.js"></script>
<script>
  var player = videojs('my-video');

  player.qualityselector({
        sources: [
          { format: 'highres', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4'},
          { format: 'hd1080', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4'},
          { format: 'hd720', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4'},
          { format: 'large', src: '//vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4'},
          { format: 'medium', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4'},
          { format: 'small', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4'},
          { format: 'auto', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4'}
        ],
        formats: [
          { code: 'highres', name: 'High' },
          { code: 'hd1080', name: '1080p' },
          { code: 'hd720', name: '720p' },
          { code: 'large', name: '480p' },
          { code: 'medium', name: '360p' },
          { code: 'small', name: '240p' },
          { code: 'auto', name: 'Auto' }
        ],

        onFormatSelected: function(format) {
          console.log(format);
        }
      });
</script>

Sources

An array of video sources matching the formats

Formats

An array of possible formats, it should contains a code and name

License

MIT. Copyright (c) Emmanuel Alves / http://github.com/manelpb

Thanks to http://www.sample-videos.com/ to provide simple example videos in different resolutions

videojs-qualityselector's Issues

Using with webpack in vue-cli project

Hello. I am building spa using vue-cli v. 3.0.0-rc.5 and there are predefined webpack configuration. So I was wonder how to use video.js and videojs-qualityselector in my project.
I made a VideoPlayer vue component where imported videojs and qualityselector. But I got an error tells:

"player.qualityselector" is not a function.

When I called player.getPlugins() I saw there is no qualityselector plugin. So I guess the reason is that the plugin is registering inside plugins code. When we use webpack, for many imports it's just create links to code, but not to instance(only if we don't import a singleton, sure), So the instance that was used to register plugin in its own code wasn't the same instance used in the VideoPlayer component to create video player.

The solution is simple. The plugin should only export its constructor function as before, and then we manually register the plugin in the place it need to be used.

Does it way has the rights to life or there is other solution I didn't find?

HLS quality levels feature

Hi,
Do you intend to support the HLS quality levels selector?

selecting a source after initial load

Some reason I cannot access the plugin after initial load with sources.
how can i trigger the selection from script.
player.qualityselector() returns undefined.
was trying to do something like
player.qualityselector().onQualitySelect({ code: 'hd720', name: 'HD' });

Selected Format Not Indicated

The currently selected format is nowhere indicated as selected. It probably should because on page load you have no idea what you're looking at by default. Why not replace the word "Quality" with the currently chosen format name? This is how YouTube and other popular video players do it.

Resuming Playback Position Upon Quality Change

The previous plugin "videojs resolution switcher" for video js 5x is smart enough to resume playback at the same point in time upon changing resolutions. It would be great if this plugin could do the same.

I know this is considered a feature but to end users this definitely comes across as a bug.

Tagging

Hiya,
can you please tag stable versions?

Cheers,
Toni

use video formats inside html video tag and use videojs-qualityselector plugin without npm

Hi i want to use 720p,480p and 360p video formats inside html5 video tag.
for example like this

<source src="video-360.mp4" type="video/mp4" data-res="360" />
<source src="video-480.mp4" type="video/mp4" data-res="480" />

and can you please let me know if i can use your plugin without npm because i am using php laravel so it will be great if i can use your plugin without using npm node...

Thanks..

DASH+HLS scenario

I have a player that shows DASH or HLS depending on what is needed, should your plugin work in a scenario like this. I've tried different approaches but without any luck...

var player = videojs('player', { autoplay: false, sources: [ { type: 'application/dash+xml', src: 'https://xxx:443/live/live2.sdp/manifest.mpd' }, { type: 'application/x-mpegURL', src: 'https://xxx:443/live/live2.sdp/playlist.m3u8' } ] });

Webpack/babel/reactjs not working

I use a reactjs webpack setup. I import videojs via npm and get the following error:

C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:151
_videoJs2["default"].plugin('qualityselector', qualityselector);
                    ^
TypeError: Cannot read property 'plugin' of undefined
    at Object.<anonymous> (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:151:21)
    at Object.1 (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:158:4)
    at s (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:7:636)
    at e (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:7:807)
    at C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:7:825
    at a (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:7:88)
    at Object.<anonymous> (C:\Users\marce\Documents\dev\ff-stream-web\node_modules\videojs-qualityselector\dist\videojs-qualityselector.js:7:338)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
C:\Users\marce\Documents\dev\ff-stream-web\tools\runServer.js:73
          throw new Error(`Server terminated unexpectedly with code: ${code} signal: ${signal}`);
          ^

Error: Server terminated unexpectedly with code: 1 signal: null
    at ChildProcess.server.once (C:/Users/marce/Documents/dev/ff-stream-web/tools/runServer.js:53:17)
    at ChildProcess.g (events.js:286:16)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
error Command failed with exit code 1.

this is not working.

i have make all what i need in 2h with your qualityselector i have 2 days and still is not wokring.