VideoJS | Nuevo Plugin for Videojs*

https://www.nuevodevel.com/nuevo/

Nuevo plugin 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 CSS stylesheet file in the head of your page.

You need to include videojs.css stylesheet file in the head section of your website page.

CODE SNIPPET

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

If you find trouble with correct css styles, you may try to load skin stylesheet in the section of your website page.

2. Setup HTML5 video tag on page

Setup HTML5 video tag to embed your video. You must set unique 'id' attribute for video element, different for each next player instance on same web page. Include/exclude video attributes as you would do for 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.

Videojs offers three predefined classes that makes easy to keep video element 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 script within website

element.

You can use Fastly CDN hosted video.js latest version minimized file.

CODE SNIPPET

<script src="//vjs.zencdn.net/8.2.0/video.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>

You can load player related javascript files below video element or above (faster method).

Once player javascript loaded and video element defined you can initialize player with nuevo plugin, including plugin options.

CODE SNIPPET

<script>
var player=videojs("example_video_1");
player.nuevo({
// plugin option1, plugin option2, plugin option3
});
</script>

Remember to keep multiple options coma separated.

You can also define global options javascript array and assign it later for nuevo plugin in short way.

CODE SNIPPET

<script>
var player=videojs("example_video_1");
var nuevo_plugin_options = { option1: value, option2: value, option3: value };
player.nuevo( nuevo_plugin_options );
</script>

Another way to initialize the player with nuevo plugin is:

CODE SNIPPET

<script>
var nuevo_plugin_options = { option1: value, option2: value, option3: value };
var player=videojs("example_video_1",{plugins: { "nuevo": nuevo_plugin_options } });
</script>

Multiple resolution video

Nuevo plugin has built-in feature to define multiple video sources encoded at different resolution 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 switch between 2 video files only, where one is of some lower quality and second is of HD quality, instead of 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 Nuevo plugin populates quality button and menu automaticallu, if only master playlist (m3u8, mpd) includes 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 small logo in controlbar
• logourl (undefined) – URL to go on logo click
• logoposition (LT) – logo position (LT – top left, RT – top right)
• target (_blank) – set player links target "self" or "blank" to open player links in same or 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)
• 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.
• 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.
• target (_self) – Set _blank to open any URL through player in new window. Necessary for "iframed" player.
• 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

Nuevo plugin fires "nuevoReady" event when all controls and plugin functions loaded. Ready method is familiar to anyone who has used jQuery before.

CODE SNIPPET

<script>
player.on('nuevoReady', function(){
this.addClass('my-class');
});
</script>

Nuevo plugin fires resolutionchange event on change with resolution label parameter. 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 most valuable Nuevo plugin options is method to change video source programatically. It was described in detail on our blog page

change video source and captions

.

CODE SNIPPET

<script>
player.changeSource( {src: "//www.domain.com/videos.mp4", type: "video/mp4"} );
</script>

Another unique Nuevo plugin options is method to load VTT chapters or captions programatically. Yoy can call this function on 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 paly first playlist media item.
• player.playlist.last(); – method to paly 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.reconnect(); – method to reload (reconnect) video source.

Player language

Videojs player is available in multiple languages. Since Nuevo plugin includes many new features, you may want to update language tranalations for new text strings.This tutorial shows how to extend certain language file, load and use language localized strings.

 

 

---

 

Videojs with Nuevo Plugin Showcase

React & Vue ExamplesNEW!Modules ready to deploy in apps like React or Vue are available to order per domain only by Gold Plan license holders.Review

Chromeless playerHide the default player interface, make use of API to build custom controls.

Watermark logoLearn how to setup player and controlbar own logo

Quality pickerVideo quality picker for multiple video resolutions, Hls and Dash.

Thumbnails over progressbarGenerate, setup and display video thumbnails over progressbar.

VTT preview thumbnailsDisplay preview thumbnails over progressbar based on VTT cues.

Settings MenusSwitching on/off Nuevo settings menus

Speed RatesHow to setup custom speed rates

Related videos containerSetup and display related video container

Related gallery sliderAlernative related videos slider (More videos)

Sharing containerSetup, use and display sharing container

Rewind/ForwardEnable/disable Rewind and Forward buttons

Zoom optionsLearn about zooming options

Mirror viewSetup and show mirror button and switch video horizontal view

End actionShow related or sharing container on video end.

Resume videoResume option to start video from time position it was left.

Watch limitSetup video watch time limit.

Context MenuDisable or setup custom context menu or right click.

Theater modeSetup theater mode and switch player size.

Video title infoDisplay video info (title) in top of video.

Autoplay functionalityAutoplay according to browsers policy

Start timeOption to start playback at given time

Multiple players on same pagePause players when other player on same page starts to play

CaptionsWebVTT multilanguage captions test

Captions SettingsAdjust cpations style programmatically

Video chaptersAdding chapters and chapters markers to video

Nuevo playlist SDKProgrammatical functions overview to manage Nuevo playlist.

Snapshot ImageCapture image from any time of the video.

Intro Skip PluginNEW!Skip intro part of the video in easy way

Video download buttonUse download button to pass media detail to server-side download function.

Unique ID for each videoUseful to identify current video for any purpose.

Dispose playerRemove the html associated with videojs player and create new instance of the player dynamically.

VAST-PRO PluginNEW!Advanced VAST plugin (separate product), with support for vmap, icons, linear and nonlinear ads, adpods, companions and ads waterfall.

Live StreamningLive streaming example through a Videojs player with Nuevo plugin.

Live Clock PluginDisplay current time on your live strea,

Offline PluginOffline image for live stream not available at the moment

Audio playbackPlaying audio through Videojs and Nuevo plugin.

Audio visualizerAudio frequency visualizer plugin.

HLS Adaptive StreamingHLS streaming with Videojs and Nuevo plugin.

HLS Fragmented MP4Fragmented fMP4 HLS streaming test

Hls.js – alternative for VHS Hls streaming3rd party HLS handler as an alternative for video.js VHS engine

MPEG-DASH StreamingMPEG-DASH playback through a videojs player with Nuevo plugin.

Alternative MPEG-DASH HandlerPlugin to play MPEH-DASH videos through latest Dash.js library.

Google DAI PluginGoogle Dynamic Ad Insertion

Google Ima AdsTest Google Adsense for Video ads.

VAST Via Google Ima PluginTest VAST playback vie Google SDK and Ima Plugin

VAST adsVAST/VPAID Plugin confihuration and tests

Video Multiple Ad Playlist (VMAP)Multiple VAST ads through VMAP protocol

VPAID adsVPAID test (VAST/VPAID Plugin)

Basic Preroll VideoPreroll video Nuevo plugin example

Basic Midroll VideoMidroll video Nuevo plugin example

Basic Postroll VideoPostroll video Nuevo plugin example

Airplay pluginAirplay plugin for Apple ready device

ChromecastChromecast plugin for Video.js

Chromecast ProChromecast Pro version for Video.js

Chromecast SubtitlesChromecast subtitles/captions overview

UpNext PluginEngaged viewers for a longer time using UpNext plugin

VR 360° TestVR 360° plugin test with Nuevo plugin

Video filtersBrightness, saturation, contrast filters for video

Media events & AnalyticsNEW!Advanced events API with Analytics & Matomo (Pwik) support

Keyboard HotkeysTest with enabled keyboard hotkeys plugin.

Language TestChange language used by player.

DRM Streaming TestPlay DRM protected media content through videojs and Eme plugin.

 

---

 

Video Advertising Options

Built-in into Nuevo plugin video advertising system allows to play video preroll, multiple midroll videos and video postroll. The type of video ad is defined through time offset value. The example above make use of total 4 video ads: preroll, midroll (00:10), second midroll (00:20) and postroll in the end.

For more details and code setup examples check Preroll Video, Midroll Video and Postroll Video dedicated resources.

 

---

 

Trailer plugin for Videojs

Trailer plugin is an effect that you can often see on TV. It shows a small video preview window in the bottom right corner with a trailer of the upcoming film, video or a show. A trailer preview is muted. A trailer preview window appears at the time defined by the user, counting from the end of the main video. User can define video title and URL to go for "Watch now" button. By default preview video is looped. Chack the options below:

• src – media file url (mp4, webm) – required
• url – url to go on button click
• title – trailer video title
• loop – set false to disable trailer playback in loop
• start – custom time in seconds to show trailer video.

CODE SNIPPET

// Load player and trailer plugin css stylesheet file
<link href="https://vjs.zencdn.net/8.2.0/video-js.css" rel="stylesheet">
<link href="//www.domain.com/videojs/plugins/videojs.trailer.css" rel="stylesheet" type="text/css">

// Load player and trailer plugin javascript files
<script src='https://vjs.zencdn.net/8.2.0/video.min.js'></script>
<script src="//www.domain.com/videojs/videojs.trailer.js"></script>
// Setup video tag with media file(s)
<video id="video_1" class="video-js vjs-fluid" controls preload='auto' width="640" height="264"> poster="VIDEO_POSTER.jpg"
<source src="VIDEO.mp4" type="video/mp4">
</video>

// Initialize player and trailer plugin
<script>
var player = videojs('video_1');
player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go'
});
</script>

By default trailer video starts to play (is showing) at the time position calculated based on main video length – trailer video length. The user may find "start" option more useful, to start trailer video at custom start time position (seconds). "start" option is also required if the main video is a live stream.

CODE SNIPPET

player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go',
start: 170
});

By default trailer video is playing in a loop. The user may disable loop playback by setting appropriate "loop" option to false.

CODE SNIPPET

player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go',
start: 170,
loop: false
});

 

 

---

 

Video related tools

STREAM TESTER Test different kinds of secure HTTPS video streams using standard video MP4/WEBM format, HLS or DASH.

SPRITE GENERETATOR Generate sprite image to show thumbs over progress bar of the videojs player with Nuevo plugin and skin.

 

---

 

React & Vue Demos and Tutorials

Modules for React and Vue apps are available to order per domain by Nuevo Gold Plan license owners. Modules license holder mmust login Nuevodevel.com to gain access to code tutorials and demos on CodeSanbox editor.

React

• Basic setup
• Related and Sharing
• Nuevo playlist
• Playlist separate
• Change video source
• Captions setup
• Video VTT thumbnails
• Video chapters setup
• Audio setup example
• UpNext plugin example
• Events & Analytic plugin
• Graphical filters plugin
• More videos gallery plugin
• Video Roll Ads
• Google Ima ads setup
• Chromecast plugin setup
• VR/360 plugin setup
• VAST/VPAID plugin setup
• Hlsjs alternative streaming
• Player's custom language

Vue

• Videojs + Nuevo Setup
• Nuevo playlist Demo & Setup
• Playlist in separate container
• Captions and Chapters
• Vroll video ads
• Google Ima ads
• Changing video source
• UpNext plugin setup
• Events & Analytic plugin
• Graphical filters plugin
• More videos gallery plugin
• Chromecast plugin setup
• VAST/VPAID plugin setup
• VR/360 plugin setup
• Hlsjs alternative streaming

Next.js demo is available through CodeSandbox editor. Please note that CodeSandbox next.js server not always starts successfully, however the code in editor is valid..

• Next.js Demo
• Next.js VAST Ads Example
• Next.js VTT Thumbnails Example
• Next.js Nuevo Playlist Example

Angular demo is available through CodeSandbox editor.

• Angular Demo
• Angular TypeScript Tutorial

Nuevo Plugin for Videojs

[/su_tab} Tabbbbbbbbbcontent

VideoJS Setup – with Neuvo Plugin

https://www.nuevodevel.com/nuevo/doc

 

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 CSS stylesheet file in the head of your page.

You need to include videojs.css stylesheet file in the head section of your website page.

CODE SNIPPET

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

If you find trouble with correct css styles, you may try to load skin stylesheet in the section of your website page.

2. Setup HTML5 video tag on page

Setup HTML5 video tag to embed your video. You must set unique 'id' attribute for video element, different for each next player instance on same web page. Include/exclude video attributes as you would do for 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.

Videojs offers three predefined classes that makes easy to keep video element 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 script within website

element.

You can use Fastly CDN hosted video.js latest version minimized file.

CODE SNIPPET

<script src="//vjs.zencdn.net/8.2.0/video.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>

You can load player related javascript files below video element or above (faster method).

Once player javascript loaded and video element defined you can initialize player with nuevo plugin, including plugin options.

CODE SNIPPET

<script>
var player=videojs("example_video_1");
player.nuevo({
// plugin option1, plugin option2, plugin option3
});
</script>

Remember to keep multiple options coma separated.

You can also define global options javascript array and assign it later for nuevo plugin in short way.

CODE SNIPPET

<script>
var player=videojs("example_video_1");
var nuevo_plugin_options = { option1: value, option2: value, option3: value };
player.nuevo( nuevo_plugin_options );
</script>

Another way to initialize the player with nuevo plugin is:

CODE SNIPPET

<script>
var nuevo_plugin_options = { option1: value, option2: value, option3: value };
var player=videojs("example_video_1",{plugins: { "nuevo": nuevo_plugin_options } });
</script>

Multiple resolution video

Nuevo plugin has built-in feature to define multiple video sources encoded at different resolution 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 switch between 2 video files only, where one is of some lower quality and second is of HD quality, instead of 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 Nuevo plugin populates quality button and menu automaticallu, if only master playlist (m3u8, mpd) includes 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 small logo in controlbar
• logourl (undefined) – URL to go on logo click
• logoposition (LT) – logo position (LT – top left, RT – top right)
• target (_blank) – set player links target "self" or "blank" to open player links in same or 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)
• 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.
• 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.
• target (_self) – Set _blank to open any URL through player in new window. Necessary for "iframed" player.
• 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

Nuevo plugin fires "nuevoReady" event when all controls and plugin functions loaded. Ready method is familiar to anyone who has used jQuery before.

CODE SNIPPET

<script>
player.on('nuevoReady', function(){
this.addClass('my-class');
});
</script>

Nuevo plugin fires resolutionchange event on change with resolution label parameter. 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 most valuable Nuevo plugin options is method to change video source programatically. It was described in detail on our blog page

change video source and captions

.

CODE SNIPPET

<script>
player.changeSource( {src: "//www.domain.com/videos.mp4", type: "video/mp4"} );
</script>

Another unique Nuevo plugin options is method to load VTT chapters or captions programatically. Yoy can call this function on 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 paly first playlist media item.
• player.playlist.last(); – method to paly 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.reconnect(); – method to reload (reconnect) video source.

Player language

Videojs player is available in multiple languages. Since Nuevo plugin includes many new features, you may want to update language tranalations for new text strings.This tutorial shows how to extend certain language file, load and use language localized strings.

more …