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 Javascript and CSS files in the head of your page.

You need to include video-js.css theme stylesheet 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="http://domain.com/video-js/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
Or you can download the video.js player javascript file and host it on your own servers.

2. Load video.js + nuevo.js javascript files and add an HTML5 video tag to your page.

<script src="http://vjs.zencdn.net/5.11.6/video.js"></script>
<script src="http://domain.com/video-js/nuevo.min.js"></script>
Now use an HTML5 video tag to embed a video. You must use unique 'id' attribute, 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="http://domain.com/poster.jpg">
 <source src="http://www.domain.com/video.mp4" type="video/mp4" />
 <source src="http://www.domain.com/video.webm" type="video/webm" />
</video>

Of course you can also host "video.js" file on your own server and load minimized version.

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="http://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="http://domain.com/poster.jpg">

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

"nuevo" variable is javascript object with set of options changing controlbar elements order. You may wish to extend video.js initial options, but you should keep options already defined. Below you can find what is "nuevo" object with initial options for video.js player.

var nuevo = {
	controlBar: {
		volumeMenuButton: { inline: false, vertical: true },
        children: [ 'liveDisplay','playToggle','remainingTimeDisplay','progressControl','durationDisplay','chaptersButton','descriptionsButton','subtitlesButton','captionsButton','volumeMenuButton','fullscreenToggle'],
    },
	"techOrder": ["youtube","html5","flash"]
};

4. List of Nuevo plugin options & settings

  • themeColor (00b1ff) - allows to change the motive color of video.js theme
  • settingsButton (true) - enable/disable settingButton with all features it brings
  • ratecontrol (true) - enable/disable Rate control menu and rate change option
  • zoomcontrol (true) - enable/disable Zoom control menu and Zoom effect
  • related (undefined) - javascript array of related videos.
  • logo (undefined) - logo image path
  • logourl (undefined) - URL to go on logo click
  • logoposition (LT) - logo position (LT - top left, RT - top right)
  • logocontrolbar (undefined) - logo image path for small controlbar logo icon
  • sharemethod (auto) - by default information about website to share is taken from website OG meta tags. If you prefer to define information manually you can set sharemethod flag to false and define custom shareUrl, shareTtile, shareEmbed options.
  • 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 (if you have one) for better tracking.
  • lang_shareText ('Check out this cool video at ') Text for sharing options.
  • lang_menu_share ('Share') Setting menu Share text.
  • lang_menu_related ('Related') Setting menu Related text.
  • lang_menu_speed ('Speed') Setting menu Speed text.
  • lang_menu_zoom ('Zoom') Setting menu Zoom text.
  • lang_related ('Related videos') Related header text
  • endAction undefined If defined (share/related) either sharing panel or related panel will display when video ends.
  • zoomNav (true) showing Zoom navigation panel in bottom left corner
  • slideImage - plugin option (or video tag attribute) to define progressbar thumbs image path.
  • slideImageWidth (192) single thumb image width for progressbar thumbs.
  • slideImageHeight (108) single thumb image height for progressbar thumbs.

5. Setup progress thumbs for video

If you have progress thumbs image prepared you can assign it for specific video same way as you assign poster image for video tag using "slideImage" attribute.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="http://domain.com/poster.jpg" slideImage="http://domain.com/video_thumbs.jpg">
 <source src="http://www.domain.com/video.mp4" type="video/mp4" />
 <source src="http://www.domain.com/video.webm" type="video/webm" />
</video>
You can also define "slideImage" path within Nuevop plugin options. Please check Progress thumbs demo website page plugin demo, read about technique and options used by Nuevo plugin.

6. Setup own brand logo image

Prepare png image file and setup appropriate logo options for Nuevo plugin as in example below. You can display logo in top-left (LT) or top-right corner (RT).

<script>
videojs('example_video_1',nuevo,function(){ 
	this.nuevoPlugin({
		logo:'//www.domain.com/images/logo.png',
		logoposition:'RT',
		logourl:'//www.domain.com/',
	});
});
</script>

7. Setup settings button and features for video

If you do not want setting button in controlbar and related options you must disable it by setting nuevo option "settingsButton" to false.

<script>
videojs('example_video_1',nuevo,function(){ 
	this.nuevoPlugin({
		settingsButton: false
	});
});
</script>

If you prefer to keep settings button in controlbar at least you must setup important information to share your video page, like share title and url, embed code. Since sicial network sharing use AddThis service you can also (optionally) pass your AddThis Pub Id.

<script>
videojs('example_video_1',nuevo,function(){ 
	this.nuevoPlugin({
		shareTitle:'video title here',
		shareUrl:'URL of page with video or other page you want to share',  //optional
		pubid: 'your AddThis Pub Id',  //optional
		shareEmbed:'code to embed your player on external websites or blogs' //optional
	});
});
</script>

Other sub option of settings button is related videos feature, displaying related video thumbs (maximum 6). If related videos not defined "Related" button remains empty and disabled. Below you can find example code how to prepare related videos and assign it as Nuevo plugin option.
First you need to prepare related videos array, anywehere in website code, before player initialized. Each related item requires to set video thumbs image path, video url and video title.

<script>
var related_videos=new Array; var obj;
obj = {thumb: '//www.domain.com/video1_thumb.jpg',url: '//www.domain.com/video1_page.html',title: 'Video 1 title'}; 
related_videos.push(obj);
obj = {thumb: '//www.domain.com/video2_thumb.jpg',url: '//www.domain.com/video2_page.html',title: 'Video 2 title'};  
related_videos.push(obj);
obj = {thumb: '//www.domain.com/video3_thumb.jpg',url: '//www.domain.com/video3_page.html',title: 'Video 3 title'};  
related_videos.push(obj);
obj = {thumb: '//www.domain.com/video4_thumb.jpg',url: '//www.domain.com/video4_page.html',title: 'Video 4 title'}; 
related_videos.push(obj);
obj = {thumb: '//www.domain.com/video5_thumb.jpg',url: '//www.domain.com/video5_page.html',title: 'Video 5 title'}; 
related_videos.push(obj);
obj = {thumb: '//www.domain.com/video6_thumb.jpg',url: '//www.domain.com/video6_page.html',title: 'Video 6 title'}; 
</script>

Now since 'related_videos' array prepared you can assign it as Nuevo plugin option.

<script>
videojs('example_video_1',nuevo,function(){ 
	this.nuevoPlugin({
		related: related_videos
	});
});
</script>

8. Video resolution switcher.

Nuevo plugin has option to switch between videos encoded with different resolution. If you offer video quality switcher between 2 video files, where one is normal (lower) quality, second is of HD quality and additionally you are not sure of videos, make use only of videos resolution and label values like "SD" and "HD" (see example below). You can alse assign "default" attribute for video to play imitially.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="http://domain.com/poster.jpg" slideImage="http://domain.com/video_thumbs.jpg">
 <source src="http://www.domain.com/video_SD.mp4" type="video/mp4" default res="SD" label="SD" />
 <source src="http://www.domain.com/video_HD.mp4" type="video/mp4" res="HD" label="HD" />
</video>
If you have more videos of different resolution to switch between, you should know and include video resolution value for each video source as in code example below.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="http://domain.com/poster.jpg" slideImage="http://domain.com/video_thumbs.jpg">
 <source src="http://www.domain.com/video_240p.mp4" type="video/mp4" res="240" label="240p" />
 <source src="http://www.domain.com/video_480p.mp4" type="video/mp4" res="480" default label="480p"/>
 <source src="http://www.domain.com/video_720p.mp4" type="video/mp4" res="720" label="720p"/>
</video>
Remember to set video sources in order from lowest to highest resolution.

9. Video.js documentation and other 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 maybe outdated or do no fit latest video.js version.