Nuevo plugin documentation
Player Setup
Video js player with Nuevo plugin setup does not differ much from one described on Video js website. It's a matter of seconds to get the player up and working on your web page.
1. Include the Video.js CSS stylesheet file in the head of your page.
You need to include videojs.css stylesheet file in the head section of your website page.<link href="//www.domain.com/videojs/css/videojs.css" rel="stylesheet">Of course you can load minimized version of stylesheet file - videojs.min.css.
If you prefer one of custom skins, just load stylesheet file from selected skin folder, eg.<link href="//www.domain.com/videojs/skins/treso/videojs.css" rel="stylesheet">2. Setup HTML5 video tag on page
On page setup HTML5 video tag to embed your video. You must set unique 'id' attribute for video element, different for each next player instance on same web page. Include/exclude video attributes as you would do for standard HTML5 video element.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg"> <source src="//www.domain.com/path/to/video.mp4" type="video/mp4" /> <source src="//www.domain.com/path/to/video.webm" type="video/webm" /> </video>Videojs offers three predefined classes that makes easy to keep video element aspect ratio.In our examples we use player 100% width of parent container and vjs-fluid class to keep original video height.
- fluid Video keeps original aspect ratio
- vjs-16-9 - Video keeps 16:9 aspect ratio
- vjs-4:3 - Videojs keeps 4:3 aspect ratio
<video id="example_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">3. Load video.js + nuevo.js javascript files on page.
<script src="//www.domain.com/videojs/video.min.js"></script> <script src="//www.domain.com/videojs/nuevo.min.js"></script>Alternatively you can use Fastly CDN hosted video.js latest version minimized file.<script src="//vjs.zencdn.net/7.5.4/video.min.js"></script> <script src="//www.domain.com/videojs/nuevo.min.js"></script>You can load player related javascript files below video element or above (faster method).
Once player javascript loaded and vide element defined you can initialize player with nuevo plugin, including plugin options.<script>var player=videojs("'example_video_1");player.nuevo({// plugin option1, plugin option2, plugin option3});</script>Remember to keep multiple options coma separated.
You can also define global options javascript array and assign it later for nuevo plugin in short way.<script>var player=videojs("'example_video_1");var options = { option1: value, option2: value, option3: value };player.nuevo({ options });</script>
Multiple resolution video
Nuevo plugin has built-in feature to define multiple video sources encoded at different resolution and an option to switch between them.
Set patameter `default` for video that you want to play first. Videos with resolution 720p or higher are marked with HD small icon.Nuevo plugin includes automatic quality/resolution picker for HTTP Live Streaming (HLS) and for MPEG-DASH streaming. If only master playlist (m3u8, mpd) includes reference to multiple, different resolution sources or playlists, quality menu will appear in player's controlbar automatically with option to switch between streams.<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="//www.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>If you offer video quality switch between 2 video files only, where one is of some lower quality and second is of HD quality, instead of numeric resolution label you can use "SD" and "HD" labels (see example below.)<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="//www.domain.com/ath/to/poster.jpg"> <source src="//www.domain.com/path/to/video_SD.mp4" type="video/mp4" default res="SD" label="SD" /> <source src="//www.domain.com/path/to/video_HD.mp4" type="video/mp4" res="HD" label="HD" /> </video>Nuevo plugin fires resolutionchange event on change with resolution label parameter. You can use it for any porpose through javascript code.<script> player.on('resolutionchange', function(){ var last_resolution = param.label; }); </script>
Check multiple Adaptive Bitrate HLS and MPEG-DASH examples using videojs and Nuevo plugin.
Nuevo plugin options
Nuevo plugin event
Nuevo plugin fires "nuevoReady" event when all controls loaded. This works exactly like videojs "ready" event, and can be used in javascript once nuevo plugin initialized.<script>player.on('nuevoReady', function(){// your code here});</script>Nuevo preroll video
Nuevo plugin has built-in preroll video feature. Great looking, easy to setup with "skip ad" option and click event.<script>
var player=videojs("'example_video_1");
player.nuevo({
// nuevo plugin options here
});
player.preroll({
src:{src:"//www.domain.com/path/to/preroll_video.mp4",type:"video/mp4"}, href:"//domain.com", skipTime:5
});
</script>Check this preroll video demo to review unique preroll design and learn about setup details.Player language
Videojs player is available in multiple languages. Since Nuevo plugin includes many new features, you may want to update language tranalations for new text strings.This tutorial shows how to extend certain language file, load and use language localized strings.