Videojs – video quality picker.
Setup multiple resolution videos for quality selector
Nuevo plugin features a built-in option to switch between videos encoded with different resolution.
You can setup multiple quality videos in two different ways: by video resolution or by simple choice between SD and HD quality. For both you can set the default video quality to play first.
Video quality resolution
Code snippet
<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video_240p.mp4" type="video/mp4" res="240" label="240p" />
<source src="//www.domain.com/path/to/video_360p.mp4" type="video/mp4" res="360" label="360p" />
<source src="//www.domain.com/path/to/video_480p.mp4" type="video/mp4" res="480"
default
label="480p"/>
<source src="//www.domain.com/path/to/video_720p.mp4" type="video/mp4" res="720" label="720p"/>
</video>
Switch to SD/HD selector
Video quality by SD/HD quality
Code snippet
<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video_hd.mp4" type="video/mp4" res="HD" label="HD" />
<source src="//www.domain.com/path/to/video_sd.mp4" type="video/mp4"
default
res="SD" label="SD" />
</video>
qualityMenu
Nuevo plugin option.
Code snippet
var player = videojs("my_player");
player.nuevo({qualityMenu: true});
Code snippet
var player = videojs("my_player");
player.nuevo({video_id: "v-001"});
player.on('resolutionchange', function(event, data){
var video_id = data.id;
var resolution = data.res;
});
For HLS adaptive stream and live streaming resolution qualities are detected automically based on the HLS playlist media specification.
Examples: Live steaming test
Same concerns MPEG-Dash stream.
Example:
Quality selector for HLS and MPEG/DASH allows to set static quality/resolution and switch it back to auto selection. Quality selector is enough advanced to detect duplicated quality entries, showing both: resolution and bitrate when resolution is duplicated, but different bitrate, showing qualities by bitrate if resolution is missing for one of m3u8 entries.
Nuevo plugin features a built-in option to switch between videos encoded with different resolution.You can setup multiple quality videos in two different ways: by video resolution or by simple choice between SD and HD quality. For both you can set the default video quality to play first.If you prefer to show qualities menu iniside settings menu instead of separate qualities menu you can enable dedicatedNuevo plugin option.The Nuevo plugin fires “resolutionchange” event whenever the user switches the video quality manually. You can set unique ID for your video to identify certain video and resolution that the user might have changed.For HLS adaptive stream and live streaming resolution qualities are detected automically based on the HLS playlist media specification.Examples: HLS steaming test Same concerns MPEG-Dash stream.Example: Mpeg/Dash streaming Test Quality selector for HLS and MPEG/DASH allows to set static quality/resolution and switch it back to auto selection. Quality selector is enough advanced to detect duplicated quality entries, showing both: resolution and bitrate when resolution is duplicated, but different bitrate, showing qualities by bitrate if resolution is missing for one of m3u8 entries.
