@glezsosa/videojs-settings
Advanced tools
Readme
A settings plugin for Hola Video.JS fork. Shows a menu with optional 3 items:
Extra features:
To start using Hola settings plugin, follow these steps:
<head>:<script src="https://cdn.rawgit.com/hola/videojs5-settings/08567a8660366ba71cb937ae2b8fdc2cf8369e56/dist/videojs-settings.min.js"></script>
plugins option for your Video.js setup:In video tag data-setup attribute in your html
<video ... data-setup='{"plugins":{"settings":{"info":true,"report":true,"quality":true}}}'>
<source src="http://cdn.example.com/static/mp4/example_1080p.mp4" type="video/mp4" label="high" />
<source src="http://cdn.example.com/static/mp4/example_720p.mp4" type="video/mp4" label="medium" />
<source src="http://cdn.example.com/static/mp4/example_360p.mp4" type="video/mp4" label="low" default />
</video>
or in javascript videojs call:
videojs('your-video-element', {
plugins: {
settings: {
info: true,
report: true,
quality: {
sources: [
{src:"http://cdn.example.com/static/mp4/example_1080p.mp4", type: "video/mp4", label: "high"},
{src:"http://cdn.example.com/static/mp4/example_720p.mp4", type: "video/mp4", label: "medium"},
{src:"http://cdn.example.com/static/mp4/example_360p.mp4", type: "video/mp4", label: "low", "default": true}
]
},
volume: {level: 0.5, mute: true},
show_settings_popup_on_click: true
}
}
});
The following configuration options are supported by this plugin:
| Property | Type | Default | Description |
|---|---|---|---|
| info | <Boolean> | false | Show 'technical info' in settings menu |
| report | <Boolean> | false | Show 'report playback issue' in settings menu |
| quality.sources | <Array> | List of quality sources. Shown in settings menu if quality.sources.length>1 | |
| quality.sources[i].src | <String> | Media source URL | |
| quality.sources[i].type | <String> | Media source type | |
| quality.sources[i].label | <String> | Media source label: shown in settings menu | |
| quality.sources[i]['default'] | <Boolean> | false | Media source to be selected by default. NOTE: this may be overriden by persistent configuration. |
| volume | ``` | false``` | |
| volume.level | <Float> | 1.0 | Volume level between 0.0 and 1.0. NOTE: use volume.mute instead of 0.0 if you want to disable volume level. NOTE: this may be overriden by persisten configuration, use volume.override_local_storage = true to force defined configuration. |
| volume.mute | <Boolean> | false | Volume mute. NOTE: this may be overriden by persisten configuration, use volume.override_local_storage = true to force defined configuration. |
| volume.override_local_storage | <Boolean> | false | Set to true if you want to force volume configuration and ignore user choice saved in persistent configuration |
| show_settings_popup_on_click | <Boolean> | false | Select the trigger method to show settings menu: onhover (false) or onclick (true) |
| Event | Description |
|---|---|
| beforeresolutionchange | Fired when user clicks on a quality menu item. Use event.preventDefault() to cancel user selection (for instance when login required to view higher quality video etc). |
| resolutionchange | Fired when new resolution applied. Use player.currentSrc() to identify selected quality. |
FAQs
A settings button for Video.js
The npm package @glezsosa/videojs-settings receives a total of 1 weekly downloads. As such, @glezsosa/videojs-settings popularity was classified as not popular.
We found that @glezsosa/videojs-settings demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.