MENU

Nuevo plugin documentation

Player Setup

A Video.js player with a Nuevo plugin setup does not differ much from one described on the Video.js website. Getting the player up and running on your web page takes only a few seconds.

1. Include the Video.js CSS stylesheet file in the head of your page.

Code snippet
<link href="//www.domain.com/videojs/skins/nuevo/videojs.min.css" rel="stylesheet">

2. Set up HTML5 video tag on page

Set up an HTML5 video tag to embed your video. You must set a unique 'id' attribute for the video element, different for each next player instance on the same web page. Include/exclude video attributes as you would do for a standard HTML5 video element.

Code snippet
<video id="example_video_1" class="video-js" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video.mp4" type="video/mp4" />
<source src="//www.domain.com/path/to/video.webm" type="video/webm" />
</video>
Keep playsinline attribute to play video inline on Apple phones.
Keep preload="auto" attribute to avoid trouble with Ima, VAST and VPAID ads.

Video.js offers three predefined classes that make it easy to keep the video element's aspect ratio.
  • vjs-fluid Video keeps original aspect ratio
  • vjs-16-9 - Video keeps 16:9 aspect ratio
  • vjs-4-3 - Video keeps 4:3 aspect ratio
  • vjs-fill - Video fills the parent element
Code snippet
<video id="example_video_1" class="video-js vjs-fluid" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">

3. Load video.js + nuevo.js javascript files.

Code snippet
<script src="//www.domain.com/videojs/video.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>
Remember to include both scripts within the website <body> element.
Code snippet
<script src="//vjs.zencdn.net/8.23.4/video.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>
Once the player JavaScript loaded and the video element is defined, you can initialize the player with the nuevo plugin, including the plugin's options.
If you own multiple registered domains, you can use the same instance of the Nuevo script file; however you must provide license key as player's option.
Code snippet
<script>
var player=videojs("example_video_1",{ license: "key" });
player.nuevo({
// plugin option1, plugin option2, plugin option3
});
</script>
If you have multiple domains registered, you can use the same Nuevo script file, but you must provide the license key for the specific domain.
Code snippet
var player=videojs("example_video_1", { license: "key" });
Remember to keep multiple options coma-separated.
You can also define a global options JavaScript array and assign it later for the Nuevo plugin in a short way.
Code snippet
<script>
var player=videojs("example_video_1", { license: "key" });
var nuevo_plugin_options = { option1: value, option2: value, option3: value };
player.nuevo( nuevo_plugin_options );
</script>
Player and Nuevo plugin's options can also be set as the player's configuration options:
Code snippet
<script>
var player_options = { license: "key", option1: value, option2: value, option3: value };
var player = videojs("example_video_1", player_options });
player.nuevo();
</script>

Multiple resolution video

Nuevo plugin has a built-in feature to define multiple video sources encoded at different resolutions and an option to switch between them later.

Set patameter `default` for video that you want to play first. Videos with resolution 720p or higher are marked with HD small icon.
Code snippet
<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video_240p.mp4" type="video/mp4" res="240" label="240p" />
<source src="//www.domain.com/path/to/video_360p.mp4" type="video/mp4" res="360" label="360p" />
<source src="//www.domain.com/path/to/video_480p.mp4" type="video/mp4" res="480" default label="480p"/>
<source src="//www.domain.com/path/to/video_720p.mp4" type="video/mp4" res="720" label="720p"/>
</video>
If you offer video quality between two video files only, where one is of some lower quality and the second is of HD quality, instead of a numeric resolution label, you can use "SD" and "HD" labels (see example below.)
Code snippet
<video id="example_video_1" class="video-js" controls preload="auto" width="640" height="360" poster="//www.domain.com/ath/to/poster.jpg">
<source src="//www.domain.com/path/to/video_SD.mp4" type="video/mp4" default res="SD" label="SD" />
<source src="//www.domain.com/path/to/video_HD.mp4" type="video/mp4" res="HD" label="HD" />
</video>

For HTTP Live Streaming (HLS) and MPEG-DASH, the Nuevo plugin populates the quality button and menu automatically if only the master playlist (m3u8, mpd) includes a reference to multiple, different resolution playlists.

Check Adaptive Bitrate HLS and MPEG-DASH playback examples using videojs and Nuevo plugin.


Nuevo plugin options

  • logo (undefined) - logo image path
  • logocontrolbar (undefined) - logo image path for a small logo in the control bar
  • logourl (undefined) - URL to go on logo click
  • logoposition (LT) - logo position (LT - top left, RT - top right)
  • logooffsetX (10) - logo offset from the left or right edge of the player
    • logooffsetY (10) - logo offset from the top or bottom edge of the player
  • target (_blank) - set player links target "_self" or "_blank" to open player links in the same or in a new window.
  • relatedMenu (true) enable/disable related option in settings menu (true/false)
  • shareMenu (true) enable/disable sharing/permalink/embed option in settings menu (true/false)
  • rateMenu (true) enable/disable rate (speed) option in settings menu (true/false)
  • sleepTimerMenu (true) enable/disable sleep Timer option in settings menu (true/false)
  • zoomMenu (true) enable/disable zoom option in settings menu (true/false)
  • settingsButton (true) set false to disable settings button and settings menus
  • controlbar (true) set false to hide control bar.
  • iosFullscreen ('native') set 'pseudo' to use pseudo fullscreen on iOS devices.
  • androidLock (false) set true to lock landscape fullscreen on Android devices, just like it is on Netflix player.
  • fullscreenButton (true) set this option to false to disable fullscreen on double click and hide fullscreen button in control bar.
  • pipButton (true) set this option to false to hide PictureInPicture button in control bar.
  • ccButton (true) set this option to false to hide Captions button in control bar Read more
  • buttonRewind (true) enable/disable rewind controlbar button. It is showing by default (true)
  • buttonForward (false) enable/disable rewind controlbar button. It is hidden by default (false)
  • mirrorButton (false) enable/disable mirror controlbar button used to switch video view
  • theaterButton (false) enable/disable theater mode button
  • tooltips (true) - set false to disable button tooltips in control bar
  • contextMenu (true) - set this option to false to hide context menu or setup own menu on right click
  • hdicon (true) - by default the player shows HD icon based on video resolution in quality menu. Set this option to false if you prefer not to show HD icon.
  • chapterMarkers (true) - by default shows chapter markers with tooltips if media chapters defined. To hide markers, set this option to false
  • startTime (undefined) start video at any time position
  • resume (false) enable/disable option to resume video playback from last time position it was left
  • endAction (undefined) display sharing related container when video ends (share/related).
  • related (undefined) - javascript array of related videos.
  • video_id (null) - unique ID to identify video for any purpose.
  • title (undefined) - title of video for sharing options
  • url (auto) - website URL with video. If not defined - document URL assigned automatically.
  • embed (N/A) - video embed code to share.
  • videoInfo (false) - set "true" to show overlay video title with optional link
  • zoomWheel (false) - set "true" to enaable ZOOM using mouse wheel on video in desktop browser and eeasy zoom slideron touchscreen
  • zoomInfo (true) - set "false" to hide ZOOM info in top-left corner when video zoomed
  • limit (0) - watch limit
  • limiturl (undefined) - watch limit URL to go on click
  • limitimage (undefined) - watch limit image URL to display over video
  • slideImage - Sprite image URL to display individual video thumbs over player's timeline.
  • iosFullscreen (native) - Set "pseudo" to use pseudo fullscreen on iOS device instead of native fullscreen.
  • androidLock (false) - Set true to lock Android in landscape mode when fullscreen requested.
  • touchControls (true) - Set false to hide big icon controls (play,rewind,forward) on touch device.
  • touchRewindForward (true) - Set false to hide big frorward and rewind buttons on touch devices.

Nuevo plugin methods and events

The Nuevo plugin fires the "nuevoReady" event when all controls and plugin functions are loaded.
Code snippet
<script>
player.on('nuevoReady', function(){
this.addClass('my-class');
});
</script>
The Nuevo plugin fires a resolution change event. You can use it for any purpose through JavaScript code.
Code snippet
<script>
player.on('resolutionchange', function(event, data){
var resolution = data.res;
var video_id = data.id;
);
</script>
One of the most valuable Nuevo plugin options is the method to change the video source programmatically. It was described in detail on our blog page change video source.
Code snippet
<script>
player.changeSource( {src: "//www.domain.com/videos.mp4", type: "video/mp4"} );
</script>
Another unique Nuevo plugin option is a method to load VTT chapters or captions programatically. You can call this function on the video "loadeddata" event.
Code snippet
<script>
player.on('loaadeddata', function(){
player.loadTracks( { kind:"chapters", src:"//www.domain.com/chapters.vtt", srclang:"en"} );
player.loadTracks( {kind:"captions", src:"//www.domain.com/vaptions.vtt"),srclang:"en",label:"English"});
});
</script>

Playlist methods and events.

Playlist media change event with new item ID.
Code snippet
<script>
player.on('playlist_change', function(event,data) {
var new_item = data.id;
});
</script>
  • player.playlist.list(); - method to get playlist list.
  • player.playlist.next(); - method to play next playlist item.
  • player.playlist.previous(); - method to play previous playlist item.
  • player.playlist.first(); - method to play first playlist media item.
  • player.playlist.last(); - method to play first playlist media item.
  • player.playlist.currentItem(); - method to get current playlist Index.
  • player.playlist.currentItem(id); - method to set new video with provided playlist Id.

Some other methods charateristic for Nuevo plugin.

  • player.forward(); - method to forward 10 seconds in video time.
  • player.rewind(); - method to rewind 10 seconds in video time.
  • player.share(); - method to toggle sharing container.
  • player.related(); - method to toggle related videos container.

Player language

The video.js player is available in multiple languages. Since the Nuevo plugin includes many new features, you may want to update language translations for new text strings. This tutorial shows how to extend certain language files, load and use language-localized strings.
Nuevo Plugin for Videojs GET IT HERE