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.Of course you can load minimized version of stylesheet file - videojs.min.css.Code snippet<link href="//www.domain.com/videojs/css/videojs.css" rel="stylesheet">
If you prefer one of custom skins, just load stylesheet file from selected skin folder, eg.Code snippet<link href="//www.domain.com/videojs/skins/treso/videojs.css" rel="stylesheet">2. Setup HTML5 video tag 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.
Keep playsinline attribute to play video inline on Apple phones.Code snippet<video id="example_video_1" class="video-js" 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>
Keep preload="auto" attribute to avoid trouble with Ima, VAST and VPAID ads.
Videojs offers three predefined classes that makes easy to keep video element aspect ratio.
- vjs-fluid Video keeps original aspect ratio
- vjs-16-9 - Video keeps 16:9 aspect ratio
- vjs-4-3 - Video keeps 4:3 aspect ratio
- vjs-fill - Video fills the parent element
Code snippet<video id="example_video_1" class="video-js vjs-fluid" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">3. Load video.js + nuevo.js javascript files.
Remember to include both script within website <body> element.Code snippet<script src="//www.domain.com/videojs/video.min.js"></script> <script src="//www.domain.com/videojs/nuevo.min.js"></script>
You can use Fastly CDN hosted video.js latest version minimized file.You can load player related javascript files below video element or above (faster method).Code snippet<script src="//vjs.zencdn.net/7.8.3/video.min.js"></script> <script src="//www.domain.com/videojs/nuevo.min.js"></script>
Once player javascript loaded and video element defined you can initialize player with nuevo plugin, including plugin options.Remember to keep multiple options coma separated.Code snippet<script> var player=videojs("example_video_1"); player.nuevo({ // plugin option1, plugin option2, plugin option3 }); </script>
You can also define global options javascript array and assign it later for nuevo plugin in short way.Another way to initialize the player with nuevo plugin is:Code snippet<script> var player=videojs("example_video_1"); var nuevo_plugin_options = { option1: value, option2: value, option3: value }; player.nuevo({ nuevo_plugin_options }); </script>Code snippet<script> var nuevo_plugin_options = { option1: value, option2: value, option3: value }; var player=videojs("example_video_1",{plugins: { "nuevo": nuevo_plugin_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 later.
Set patameter `default` for video that you want to play first. Videos with resolution 720p or higher are marked with HD small icon.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.)Code snippet<video id="example_video_1" class="video-js" 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>Code snippet<video id="example_video_1" class="video-js" 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>For HTTP Live Streaming (HLS) and MPEG-DASH Nuevo plugin populates quality button and menu automaticallu, if only master playlist (m3u8, mpd) includes reference to multiple, different resolution playlists.
Check Adaptive Bitrate HLS and MPEG-DASH playback examples using videojs and Nuevo plugin.
Nuevo plugin options
Nuevo plugin methods and events
Nuevo plugin fires "nuevoReady" event when all controls and plugin functions loaded. Ready method is familiar to anyone who has used jQuery before.Nuevo plugin fires resolutionchange event on change with resolution label parameter. You can use it for any purpose through javascript code.Code snippet<script> player.on('nuevoReady', function(){ this.addClass('my-class'); }); </script>One of most valuable Nuevo plugin options is method to change video source programatically. It was described in detail on our blog pages: videojs change source or reconnect and change video source and captions.Code snippet<script> player.on('resolutionchange', function(event, data){ var resolution = data.res; var label = data.label; }); </script>Another unique Nuevo plugin options is method to load VTT chapters or captions programatically. Since this is Nuevo plugin function, you can call it once the plugin is loaded.Code snippet<script> player.changeSource( {src: "//www.domain.com/videos.mp4", type: "video/mp4"} ); </script>Code snippet<script> player.on('nuevoReady', function(){ player.loadTracks( { kind:"chapters", src:"//www.domain.com/chapters.vtt", srclang:"en"} ); player.loadTracks( {kind:"captions", src:"//www.domain.com/vaptions.vtt"),srclang:"en",label:"English"}); }); </script>Playlist methods and events.
Playlist media change event with new item ID.Code snippet<script> player.on('playlist_change', function(event,data) { var new_item = data.id; }); </script>Some other methods charateristic for Nuevo plugin.
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.