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

Version

Directory videojs8 refers to stable version 8.3.0 of video.js, released 2023.04.05 and latest version 11.2.0 of the Nuevo software, released 2023.05.28. All demos included into `examples` subdirectory refer to mentioned recent versions.

The latest version of the Nuevo software for Video.js v 7 version (7.21.4 released 2023-03-15) is also included. Player files and Nuevo plugins files for this version are located in `videojs7` directory. Appropriate demos are located in the examples sub-directory.

I. Basic setup

Here's the basic setup of Video.js player with Nuevo plugin and skin, which is the same for Video.js v8 and v7.

1. 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 the 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>
2. Load player skin CSS file, video.js player and nuevo.min.js plugin javascript files inside the <body> element of your website page. 
<link href="//domain.com/path-to/videojs/skins/skin-name/videojs.min.css" rel="stylesheet">
<script src="//domain.com/path-to/videojs/video.min.js"></script>
<script src="//domain.com/path-to/videojs/nuevo.min.js"></script>
3. Load and initialize Videojs with Nuevo plugin.
Initialize videojs player and nuevo plugin for each instance of the 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 the same mp4 video but different resolutions, <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>
The example above will play video with an 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 the code example above uses static width and height defined in pxels for player size.
You can also use one of videojs predefined classes for specific player aspect ratio or player size.

vjs-fluid class will fit 100% width of the parent container and will keep the player height according to video aspect ratio. 
<video id="player_1" class="video-js vjs-fluid" controls preload="auto" width="100%"  poster="//domain.com/path-to/poster.jpg">

vjs-16-9 class will fit 100% width of the parent container and will keep 16:9 aspect ratio for player size. 
<video id="player_1" class="video-js vjs-16-9" controls preload="auto" width="100%" poster="//domain.com/path-to/poster.jpg">

vjs-4-3 class will fit 100% width of the parent container and will keep 4:3 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-fill class will make the player fit and fill out its container. 
<video id="player_1" class="video-js vjs-fill" controls preload="auto" poster="//domain.com/path-to/poster.jpg">


You may decide about "preload" attribute for the video tag. An article on stevesouders blog explains HTML5 video "preload" attribute meaning and usage.

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

The list of available Nuevo plugin options is available on the documentation page of Nuevodevel.com website.
You may also review Demos on Nuevodevel.com website to check specific options usage online.



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