• Stars
    star
    154
  • Rank 242,095 (Top 5 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 8 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

videojs-contrib-quality-levels

Build Status Greenkeeper badge Slack Status

NPM

A plugin that provides a framework of working with source quality levels.

Maintenance Status: Stable

Installation

Installation

npm install --save videojs-contrib-quality-levels

The npm installation is preferred, but Bower works, too.

bower install  --save videojs-contrib-quality-levels

Using

The list of QualityLevels can be accessed using qualityLevels() on the Player object. With this list, you can:

  • See which quality levels are available for the current source
  • Enable or disable specific quality levels to change which levels are selected by ABR
  • See which quality level is currently selected by ABR
  • Detect when the selected quality level changes

Example

let player = videojs('my-video');

let qualityLevels = player.qualityLevels();

// disable quality levels with less than 720 horizontal lines of resolution when added
// to the list.
qualityLevels.on('addqualitylevel', function(event) {
  let qualityLevel = event.qualityLevel;

  if (qualityLevel.height >= 720) {
    qualityLevel.enabled = true;
  } else {
    qualityLevel.enabled = false;
  }
});

// example function that will toggle quality levels between SD and HD, defining and HD
// quality as having 720 horizontal lines of resolution or more
let toggleQuality = (function() {
  let enable720 = true;

  return function() {
    for (let qualityLevel of qualityLevels) {
      if (qualityLevel.height >= 720) {
        qualityLevel.enabled = enable720;
      } else {
        qualityLevel.enabled = !enable720;
      }
    }
    enable720 = !enable720;
  };
})();

let currentSelectedQualityLevelIndex = qualityLevels.selectedIndex; // -1 if no level selected

// Listen to change events for when the player selects a new quality level
qualityLevels.on('change', function() {
  console.log('Quality Level changed!');
  console.log('New level:', qualityLevels[qualityLevels.selectedIndex]);
});

Supporting Quality Levels for your source

This project provides the framework for working with source quality levels. Just including this project alongside videojs does not necessarily mean that there will be levels available in the list or that any events will be triggered. Some projects within the videojs org supports this project and automatically populates the list and triggers change events when the selected quality level changes. See the Supported Projects section for a list of these projects.

If you are not using one of the supported projects, but still want to use quality levels with your source, you will have to implement your own plugin that populates the list and triggers change events when selected level changes. Implementing such a plugin is very specific to the source in question, so it is difficult to provide specific examples, but will most likely require a custom middleware, source handler, or tech.

Populating the list

Initially the list of quality levels will be empty. You can add quality levels to the list by using QualityLevelList.addQualityLevel for each quality level specific to your source. QualityLevelList.addQualityLevel takes in a Representation object (or generic object with the required properties). All properties are required except width, height and frameRate.

Example Representation

Representation {
  id: string,
  width: number,
  height: number,
  bitrate: number,
  frameRate: number,
  enabled: function
}

The enabled function should take an optional boolean to enable or disable the representation and return whether it is currently enabled.

You can also remove quality levels from the list using QualityLevelList.removeQualityLevel. Call this function with the reference to the QualityLevel object you wish to remove. The QualityLevelList.selectedIndex property will automatically be updated when a quality level is removed so that it still refers to the correct level. If the currently selected level is removed, the selectedIndex will be set to -1.

Triggering the 'change' event

When your playback plugin changes the selected quality for playback, you will also have to trigger the change event on the QualityLevelList and update the QualityLevelList.selectedIndex_, as it does not have knowledge of which quality is active in playback.

let player = videojs('my-video');

let qualityLevels = player.qualityLevels();

qualityLevels.selectedIndex_ = 0;
qualityLevels.trigger({ type: 'change', selectedIndex: 0 });

Supported Projects

The following projects have built-in support for videojs-contrib-quality-levels and will automatically populate the list with available levels and trigger change events when the quality level changes.

Including the Plugin

To include videojs-contrib-quality-levels 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-contrib-quality-levels.min.js"></script>
<script>
  var player = videojs('my-video');

  player.qualityLevels();
</script>

Browserify

When using with Browserify, install videojs-contrib-quality-levels via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-contrib-quality-levels');

var player = videojs('my-video');

player.qualityLevels();

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-contrib-quality-levels'], function(videojs) {
  var player = videojs('my-video');

  player.qualityLevels();
});

License

Apache-2.0. Copyright (c) Brightcove, Inc.

More Repositories

1

video.js

Video.js - open source HTML5 video player
JavaScript
37,903
star
2

videojs-contrib-hls

HLS library for video.js
JavaScript
2,840
star
3

http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
JavaScript
2,490
star
4

videojs-youtube

YouTube playback technology for Video.js
JavaScript
1,123
star
5

mux.js

Lightweight utilities for inspecting and manipulating video container formats.
JavaScript
1,104
star
6

videojs-vr

A plugin to add 360 and VR video support to video.js.
JavaScript
540
star
7

m3u8-parser

An m3u8 parser.
JavaScript
475
star
8

videojs-contrib-ads

A Tool for Building Video.js Ad Plugins
JavaScript
382
star
9

videojs-playlist

Playlist plugin for videojs
JavaScript
365
star
10

video-js-swf

Custom Flash Player for VideoJS
JavaScript
336
star
11

videojs-contrib-dash

Video.js plugin for supporting the MPEG-DASH playback through a video.js player
JavaScript
293
star
12

videojs-overlay

A video.js plugin to display simple overlays during playback.
JavaScript
245
star
13

videojs-flash

The Flash tech for video.js
JavaScript
215
star
14

videojs-contrib-eme

Supports Encrypted Media Extensions for playback of encrypted content in Video.js
JavaScript
201
star
15

videojs-vimeo

Support Vimeo source for Video.js
JavaScript
196
star
16

hls-fetcher

JavaScript
162
star
17

videojs-contrib-media-sources

Code for working with the media source extensions API and video.js
JavaScript
144
star
18

themes

Videojs themes 💅
CSS
140
star
19

videojs-playlist-ui

A playlist video picker for video.js
JavaScript
129
star
20

thumbcoil

Tools for inspecting MPEG2TS, fMP4, and FLV files and the codec bitstreams therein
JavaScript
124
star
21

videojs-errors

A video.js plugin that displays error messages to video viewers.
JavaScript
88
star
22

generator-videojs-plugin

Yeoman generator for video.js plugins.
JavaScript
80
star
23

mpd-parser

JavaScript
78
star
24

vtt.js

A JavaScript implementation of the WebVTT specification, forked from vtt.js for use with Video.js
JavaScript
70
star
25

font

Icon font used for Video.js
CSS
60
star
26

videojs.com

The Video.js Website
MDX
58
star
27

designer

A video.js player skin editor using a live CSS editor
JavaScript
42
star
28

aes-decrypter

JavaScript
34
star
29

videojs-playbackrate-adjuster

A Video.js middleware that adjusts controls based on playback rate
JavaScript
28
star
30

videojs-contextmenu-ui

A cross-device context menu UI for video.js players.
JavaScript
28
star
31

cdn

The video.js CDN
JavaScript
24
star
32

ie8

Video.js files for IE8 compatibility
JavaScript
23
star
33

video.js-component

Video.js - HTML5 Video Player - Component
JavaScript
15
star
34

docs

videojs docs
JavaScript
14
star
35

plugin-concat

Concatenate videos for playback by videojs/http-streaming in a Video.js player
JavaScript
11
star
36

videojs-adaptive

Building support for adaptive streaming video formats into video.js
JavaScript
9
star
37

doc-generator

Auto-generate API docs for the video.js codebase and plugins
JavaScript
8
star
38

videojs-settings-menu

A place to incubate a new settings menu for videojs.
JavaScript
8
star
39

videojs-media-session

Media Session API plugin
JavaScript
8
star
40

vhs-utils

Objects and functions shared throughout @videojs/http-streaming code
JavaScript
7
star
41

videojs-4to5

Tools to ease the transition from video.js 4.x to 5.x.
JavaScript
7
star
42

thumb.co.il

The fancy front-end for Thumbcoil!
JavaScript
7
star
43

monorepo

Monorepo for all videojs packages
TypeScript
7
star
44

standard

JavaScript Standard Style — One Style to Rule Them All
JavaScript
6
star
45

remark-preset-lint-videojs

A remark linting preset for Video.js
JavaScript
5
star
46

blog

The video.js blog
Stylus
5
star
47

videojs-placeholder

A placeholder for videojs packages
5
star
48

videojs-contrib-quality-menu

Adds a quality selector button to the Video.js control bar for Video.js 8+
JavaScript
5
star
49

videojs-languages

JavaScript
4
star
50

grunt-videojs-languages

A grunt task to convert video.js language JSON files in to includable scripts.
JavaScript
4
star
51

autoplay-tests

Autoplay test examples
HTML
3
star
52

videojs-generate-rollup-config

Generate a standard rollup config, so that plugins don't need the same script in every repository.
JavaScript
3
star
53

eslint-config-videojs

JavaScript
3
star
54

webwackify

launch a web worker that can require() in the browser with browserify and webpack
JavaScript
3
star
55

tooling

A monorepo for all videojs project and plugin tooling
JavaScript
2
star
56

spellbook

JavaScript
2
star
57

rfcs

RFCs for changes to Video.js
2
star
58

generator-helpers

A package to keep all of our generator helpers packages, so everything can be updated more easily.
1
star
59

ffrwd

ffrwd is an extensible HTML5 streaming media player capable of playing HLS, MPEG-DASH and more!
1
star
60

.github

1
star
61

xhr

A small xhr wrapper
JavaScript
1
star
62

babel-config

A standard babel config, so that plugins don't need the same script in every repository.
JavaScript
1
star
63

videojs-bundler-sample

sample and test project for using Video.js with various bundler configurations
JavaScript
1
star
64

admin

Video.js organizational documentation
Shell
1
star
65

svg-sprite-generator

1
star