Nuevo plugin and Skin for Video.js player version 7.x

I. Basic setup

Here's basic setup of Video.js player with Nuevo plugin and skin.

1. Include css stylesheet from one of skins directories into head section of your website. 
<link href="//domain.com/path-to/videojs/css/videojs.min.css" rel="stylesheet">

2. Include video.js player and nuevo.min.js plugin files on your website page. 
<script src="//domain.com/path-to/videojs/video.min.js"></script>
<script src="//domain.com/path-to/videojs/nuevo.min.js"></script>
4. Add an HTML5 video tag and setup video sources on your page.
Use standard 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. 
<video id="player_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="//domain.com/path-to-poster.jpg" playsinline>
 <source src="//domain.com/path-to/video.mp4" type="video/mp4" />
 <source src="//domain.com/path-to/video.webm" type="video/webm" />
</video>
If you plan to use multiple versions of same video but different resolution, setup code may look like: 
<video id="player_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="//domain.com/path-to/poster.jpg" playsinline>
 <source src="//domain.com/path-to/video240p.mp4" type="video/mp4" res="240" label="240p" />
 <source src="//domain.com/path-to/video480p.mp4" type="video/mp4" res="480" label="480p" default />
 <source src="//domain.com/path-to/video720p.mp4" type="video/mp4" res="720" label="720p" />
</video>
Example above will play video with option to switch between 3 different resolution video files. Set default flag to decide which video resolution to play by default.

Video HTML tag in code example above use static width and height defined in pxels for player size.
You can also use one of videojs predefined classes for specific player aspect ratio. 
<video id="player_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" width="100%"  poster="//domain.com/path-to/poster.jpg">
vjs-fluid class will fit 100% width of parent container and will keep player height according to video aspect ratio. 
<video id="player_1" class="video-js vjs-16-9 js-default-skin" controls preload="auto" width="100%" poster="//domain.com/path-to/poster.jpg">
vjs-16-9 class will fit 100% width of parent container and will keep 16:9 aspect ratio for player size. 
<video id="player_1" class="video-js vjs-4-3 js-default-skin" controls preload="auto" width="100%" poster="//domain.com/path-to/poster.jpg">
vjs-4-3 class will fit 100% width of parent container and will keep 4:3 aspect ratio for player size.


Delivered "video.js" file and minimized version "videojs.min.js" is version 7.6 of video.js player.
You may also load any other video.js version 7.x or later from videojs Fastly CDN server, eg. "https://vjs.zencdn.net/7.6.0/video.min.js"

You may decide about "preload" attribute for video tag. You can find great article about HTML5 "preload" at stevesouders blog

5. Load and initialize Videojs with Nuevo plugin.
Finally you must initialize player with "nuevo" plugin for each instance of player: 
<script>
var player = videojs('player_1'); 
player.nuevo({
		option1: option1 value,
		option2: option2 value
	});
});
</script>
Vidojs setup must refer to html "video" element unique id.
The list of available options is available on documentation page of Nuevodevel.com website.

Once you upload files to your server, in "/examples/" directory you will find a bunch of HTML examples covering most popular usage of videojs player and nuevo plugin.



Website: http://www.nuevodevel.com/videojs
Support: team.nuevodevel@gmail.com