videojs-settings-menu
VideoJS settings menu for Quality, Chapters, Subtitles, Playback rates and more
Table of Contents
Installation
npm install --save @samueleastdev/videojs-settings-menu
Usage
To include videojs-settings-menu 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="node_modules/video.js/dist/video.js"></script>
<script src="node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js"></script>
<script src="node_modules/@samueleastdev/videojs-dash-hls-bitrate-switcher/dist/videojs-dash-hls-bitrate-switcher.js"></script>
<script src="dist/videojs-settings-menu.js"></script>
<script>
(function (window, videojs) {
var examplePlayer = (window.examplePlayer = videojs("vp", {
techOrder: ["html5"],
html5: {
hls: {
overrideNative: true,
cacheEncryptionKeys: true,
},
},
plugins: {
dashHlsBitrateSwitcher: {
support: "both",
},
settingsMenu: {
items: [
"AudioTrackButton",
"ChaptersButton",
"SubsCapsButton",
"PlaybackRateMenuButton",
"RatesButton",
],
languages: {
settings: "Settings",
loading: "Loading",
back: "Back",
captions_off: "Captions Off",
default_audio: "Default Audio",
audio: "Audio",
subtitles: "Subtitles",
chapters: "Chapters",
speed: "Speed",
quality: "Quality",
},
},
},
crossOrigin: "anonymous",
liveui: true,
autoplay: true,
muted: true,
playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
nativeControlsForTouch: false,
}));
document.getElementById("switch").addEventListener("click", (_evt) => {
examplePlayer.src({
src: "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
type: "application/x-mpegURL",
});
});
})(window, window.videojs);
</script>
Browserify/CommonJS
When using with Browserify, install videojs-settings-menu 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-settings-menu");
var player = videojs("my-video");
player.settingsMenu();
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-settings-menu"], function (videojs) {
var player = videojs("my-video");
player.settingsMenu();
});
License
MIT. Copyright (c) Samuel East