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 file in the head section of your website page.
<link href="//" 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="//">
 <source src="//" type="video/mp4" />
 <source src="//" type="video/webm" />

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="//"></script>
<script src="//"></script>
Alternatively you can use Fastly CDN hosted video.js file
<script src="//"></script>
<script src="//"></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="//">
Yet another video.js CSS useful class is "vjs-fluid". This fits player to container's width with auto calculated height to keep video aspect ratio, eg.
<video id="example_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" width="640" height="360" poster="//">

4. Initialize video.js player and Nuevo plugin

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

var player=videojs("'example_video_1");
	// plugin options here

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.

var options { logo: '//', logoposition: 'RT', logourl: '//', zoomMenu: false };
var player=videojs("'example_video_1");
player.nuevo({ options });

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="//">
 <source src="//" type="video/mp4" res="240" label="240p" />
  <source src="//" type="video/mp4" res="360" label="360p" />
 <source src="//" type="video/mp4" res="480" default label="480p"/>
 <source src="//" type="video/mp4" res="720" label="720p"/>
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="//">
 <source src="//" type="video/mp4" default res="SD" label="SD" />
 <source src="//" type="video/mp4" res="HD" label="HD" />
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.

var player=videojs("'example_video_1");
	// nuevo plugin options here
player.on('resolutionchange', function(){
	var last_resolution = param.label;

6. Nuevo plugin options

  • 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
  • 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

  • overlay (undefined) - overlay URL to display html on each pause event

  • 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.

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.
Check preroll plugin setup basic example code below.

var player=videojs("'example_video_1");
	// nuevo plugin options here
	src:{src:"//",type:"video/mp4"}, href:"//", skipTime:5	

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. 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.

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

For general Video.js player full documentation and 3rd party plugins check it at source of video.js framework website. Official other video.js plugins are available to review and download on 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.