Nuevo plugin for video.js 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 video-js.css stylesheet fuile in the head of your website page. If you'd like to support IE8 you may include ES5 shim for few modern features of Javascript (ES5) used by video.js player. You can use the free CDN hosted version of the video.js javascript player file.
<link href="//www.domain.com/video-js/video-js.min.css" rel="stylesheet">

2. Setup HTML5 video tag on page

Now use an HTML5 video tag to embed a video on page. You must set unique 'id' attribute for video element, different for each next player instance on same web page. Include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5.
<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.mp4" type="video/mp4" />
 <source src="//www.domain.com/path/to/video.webm" type="video/webm" />
</video>

3. Load video.js + nuevo.js javascript files on page. It's also the right time and place to load other javascript plugins if you plan to use some.

<script src="//www.domain.com/video-js/video.min.js"></script>
<script src="//www.domain.com/video-js/nuevo.min.js"></script>
Alternatively you can use Fastly CDN hosted video.js file
<script src="//vjs.zencdn.net/7.2.0/video.min.js"></script>
<script src="//www.domain.com/video-js/nuevo.min.js"></script>
Video.js has two easy CSS classes ( vjs-16-9 and vjs-4-3 ). You can just add it to the setup code to keep required aspect ratio, eg.
<video id="example_video_1" class="video-js vjs-16-9 vjs-default-skin" controls preload="auto" width="640" height="360" poster="//www.domain.com/poster.jpg">
Yet another video.js CSS useful class is "vjs-fluid". This fits player to container's width with auto calculated height to keep aspect ratio, eg.
<video id="example_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" width="640" height="360" poster="//www.domain.com/poster.jpg">

4. Initialize video.js player and Nuevo plugin

You must initialize each instance of player using same 'id' attribute, set for video tag.

<script>
videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		// plugin options here
	});
});
</script>

Since you can have number of multiple options, it is possible to assign them all within separate javascript object (enclosed in braces), and later pass the object name as nuevo plugin variable. Of course you can include object with plugin options into any javascript file loaded before nuevo plugin initialized.

<script>
var options { logo: '//domain.com/path/to/logo.png', logoposition: 'RT', logourl: '//domain.com', zoomMenu: false };
videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		options
	});
});
</script>

5. Video resolution switcher.

Nuevo plugin has built-in feature to switch between videos encoded with different resolution. Below you have example how to setup video tag for multiple resolution support.
<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>
Remember to set video sources in order from lowest to highest resolution. You can set patameter default for video to play first. Video with resolution 720p and higher is additionally 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.)
<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>
By default Video Quality Switcher appears as separate button and quality menu in player's control bar. You can also decide to show Video Quality menu as Settings button sub menu if you only disbale qualityButton nuevo plugin option.


Nuevo plugin fires resolutionchange event on change with resolution label parameter. You can use it for any porpose, eg. to store last resolution played as user's session value.

<script>
var player = videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		// nuevo plugin options here
	});
});
player.on('resolutionchange', function(){
	var last_resolution = param.label;
});
</script>

6. List of Nuevo plugin options & settings

  • relatedMenu (true) enable/disable related option in settings menu (true/false)
  • shareMenu (true) enable/disable share option in settings menu (true/false)
  • rateMenu (true) enable/disable rate (speed) option in settings menu (true/false)
  • zoomMenu (true) enable/disable zoom option in settings menu (true/false)
  • mirrorButton (false) enable/disable mirror controlbar button used to switch video view
  • resume (false) enable/disable resume option to start video playback from last time position it was left
  • theaterButton (false) enable/disable theater mode button
  • hlsQualities (true) disable option (set false) to discard HLS automatic resolution picker
  • dashQualities (true) disable option (set false) to discard DASH/MPEG automatic resolution picker
  • endAction (undefined) If defined (share/related) either sharing panel or related panel will display when video ends.
  • timetooltip (true) - show or hide current timetooltip (true/false)
  • mousedisplay (true) - show or hide progressbar timetooltip (true/false)
  • errordisplay (true) - set this option to false if yiou wish to hide error messages
  • related (undefined) - javascript array of related videos.

  • logo (undefined) - logo image path
  • logocontrolbar (undefined) - logo image path for small controlbar logo icon
  • logourl (undefined) - URL to go on logo click
  • logoposition (LT) - logo position (LT - top left, RT - top right)

  • shareTitle (undefined) - title of video for sharing options
  • shareUrl (auto) - website URL with video. If not defined - document URL assigned automatically.
  • shareEmbed (N/A) - video embed code to share.
  • pubid (undefined) - since plugin use AddThis service for sharing purpose you may pass your AddThis pubid for better tracking.
  • videoInfo (false) - set "true" to show overlay video title with optional link

  • limit (0) - watch limit
  • limiturl (undefined) - watch limit URL to go on click
  • limitimage (undefined) - watch limit image URL to display over video

  • slideImage - Sprite image URL to display individual video thumbs over player's timeline.
  • slideWidth (192) single thumb width (px) from sprite image.
  • slideHeight (108) single thumb height (px) from sprite image.
  • slideType (vertical) thumbs layout method used to generate timeline sprite image.

Nuevo plugin fires "nuevoReady" event when all controls loaded. This works exactly like videojs "ready" event, and can be used once nuevo plugin initialized.

var player = videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		// nuevo plugin options here
	});
});
player.on('nuevoReady', function(){
	// your code here
});

7. Preroll video plugin.

Nuevo plugin offers built-in preroll video feature. Great looking, easy to setup with "skip ad" option and click event.
Preroll sub plugin requires "videojs.ads.js" 3rd party javascript plugin to be loaded along with "video.js" core player javascript file. You can use "videojs.ads.js" file provided by Nuevolab, or download it from Check preroll plugin setup basic example code below.

<script>
var player = videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		// nuevo plugin options here
	});
	this.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.

8. Watch time limit.

Nuevo plugin offers built-in video watch time limit feature. You can limit watch time to any number of seconds and display either text message or image with link to any website URL on click.
Watch time limit does not require to load any additional resources, only few options within videojs player setup.
Check this small plugin options and code setup tutorial on dedicated watch time limit demo example.

9. Youtube playback.

Nuevo plugin supports YouTube playback technology making use of official Youtube Api Player. Player setup code with youtube URL is even easier than one suggested by 3rd part Github plugin.
Heave a look at youtube video playback example and follow code setup.

10. Languages.

Nuevo plugin includes many new features and sub plugins. Some of them comes with texts that you may want to tranalate to your native language, same like other Video.js texts.
Please check this languages tutorial how to extend and use language localized strings.

11. Video.js tests and other 3rd party plugins.

Some other Nuevo plugin or theme options has been described on dedicated Nuevolab website pages (preroll video, youtube playback, theme color).

For general Video.js player full documentation check it at source of video.js framework website. Official other video.js plugins are available to review and download on http://videojs.com/plugins/. You may also check Github videojs plugins dedicated resource for even more plugins, but remember that some of them can be outdated or do no fit latest video.js version.