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

Version

Nuevo plugin javascript file is located in "/videojs" directory and it is latest version 7.2.5, released 2021.04.28
Video.js core file located in same directory is version 7.12.1, released 2021.04.13

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/skins/skin-name/videojs.min.css" rel="stylesheet">

2. Add an HTML5 video tag and setup video sources inside the <body> element of your website 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" 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>
3. Include video.js player and nuevo.min.js plugin files inside the <body> element of 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. 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.


If you plan to use multiple versions of same video but different resolution, <video> setup code may look like:
<video id="player_1" class="video-js" 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" 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" 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" 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.

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

The list of available Nuevo plugin 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