Mục lục

Silvermine VideoJS Quality/Resolution Selector

Build Status
Coverage Status
Dependency Status
Dev Dependency Status

What is it?

A plugin for videojs versions 6+ that adds a button to the control
bar which will allow the user to choose from available video qualities or resolutions.

How do I use it?

There are three primary steps to use this plug-in: (1) including,
(2) providing sources, and (3) adding the component the to
controlBar. Please see the following for information on each
step.

Using `<script>` tag

The minified JS file can come from a downloaded copy or a CDN. When including
it, make sure that the <script> tag for the plugin appears after the
include for video.js (note that this plugin will look
for videojs at window.videojs).

There is an example of this in
docs/demo/index.html.

From local file

<
script
 src
=
"./path/to/video.min.js"
>
<
/
script
>
<
script
 src
=
"./path/to/silvermine-videojs-quality-selector.min.js"
>
<
/
script
>

<
link
 href
=
"https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css"
 rel
=
"stylesheet"
>
<
script
 src
=
"./path/to/video.min.js"
>
<
/
script
>
<
script
 src
=
"https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"
>
<
/
script
>

Using `require`

When using NPM/Browserify, first install the plugin.

npm install --save @silvermine/videojs-quality-selector

For videojs to use the plug-in, the plugin needs to register itself with the instance of
videojs. This can be accomplished by:

var
 videojs
 =
 require
(
'videojs'
)
;

// The following registers the plugin with `videojs`
require
(
'@silvermine/videojs-quality-selector'
)
(
videojs
)
;

Remember to also add the CSS to your build. With most bundlers you can:

require
(
'@silvermine/videojs-quality-selector/dist/css/quality-selector.css'
)

Providing video sources

Sources can be provided with either the <source> tag or via the src function on the
instance of a video.js player.

Using `<source>`

<




video
 id
="video_1
" class
="video-js vjs-default-skin
" controls
 preload
="auto
" width
="640
" height
="268
">
   <
source
 src
="
" type
="video/mp4
" label
="720P
">
   <
source
 src
="
" type
="video/mp4
" label
="480P
" selected
="true
">
   <
source
 src
="
" type
="video/mp4
" label
="360P
">
</
video
>

Using `player.src()`

player
.
src
(
[
   {
      src
: 'https://example.com/video_720.mp4'
,
      type
: 'video/mp4'
,
      label
: '720P'
,
   }
,
   {
      src
: 'https://example.com/video_480.mp4'
,
      type
: 'video/mp4'
,
      label
: '480P'
,
      selected
: true
,
   }
,
   {
      src
: 'https://example.com/video_360.mp4'
,
      type
: 'video/mp4'
,
      label
: '360P'
,
   }
,
]
)
;

Adding to the player

There are at least two ways to add the quality selector control to the player’s control
bar. The first is directly adding it via addChild. For example:

videojs
(
'video_1'
,
 {
}
,
 function
(
)
 {
   var
 player
 =
 this
;

   player
.
controlBar
.
addChild
(
'QualitySelector'
)
;
}
)
;

The second option is to add the control via the player’s options, for instance:

var
 options
,
 player
;

options
 =
 {
   controlBar
: {
      children
: [
         'playToggle'
,
         'progressControl'
,
         'volumePanel'
,
         'qualitySelector'
,
         'fullscreenToggle'
,
      ]
,
   }
,
}
;

player
 =
 videojs
(
'video_1'
,
 options
)
;

How do I contribute?

We genuinely appreciate external contributions. See our extensive
documentation on how to
contribute.

License

This software is released under the MIT license. See the license file for more
details.

GitHub – silvermine/videojs-quality-selector