Videojs Related Videos container

Setup related videos for the Videojs player with Nuevo plugin

As you can see in the video example above Nuevo plugin for Video.js player allows to display related videos container with videos thumbnails and links to the appropriate video URL for each. It appears on screen when you select "Related" item from the Settings button menu.You can define unlimited related videos and minimum is 2 related videos. Related container is responsive. On desktop compouter, you can scroll related video items using arrows, on touch devices use finger to scroll for next or previous related video items.
Information about related videos details must be defined as a javascript objects array. See the code example below how it can be done.

Prepare an array of related videos

Code snippet

<script>
var related_videos = [
{thumb: '//domain.com/path/to/video_thumb_1.jpg',url: '//domain.com/path/to/video_1.html', title: 'Video 1 title', duration: '05:30'},
{thumb: '//domain.com/path/to/video_thumb_2.jpg',url: '//domain.com/path/to/video_2.html', title: 'Video 2 title', duration: '05:30'},
{thumb: '//domain.com/path/to/video_thumb_3.jpg',url: '//domain.com/path/to/video_3.html', title: 'Video 3 title', duration: '05:30'},
{thumb: '//domain.com/path/to/video_thumb_4.jpg',url: '//domain.com/path/to/video_4.html', title: 'Video 4 title', duration: '05:30'},
{thumb: '//domain.com/path/to/video_thumb_5.jpg',url: '//domain.com/path/to/video_5.html', title: 'Video 5 title', duration: '05:30'},
{thumb: '//domain.com/path/to/video_thumb_6.jpg',url: '//domain.com/path/to/video_6.html', title: 'Video 6 title', duration: '05:30'}
];
</script>

You can place related array code in any place of your website source, above player setup code. You can also load it as a separate javascript file just as we do on Nuevodevel website.

Nuevo plugin setup code

Once related_videos array is defined, you can assign it as a related option among other Nuevo plugin's options, like in player setup code below for one video available in multiple resolutions.

Code snippet

<script>
var player = videojs('example_video_1');
player.nuevo({
logo: '//domain.com/path/to/logo.png',
logourl: '//domain.com',
related: related_videos
});
</script>

Show Related programmatically

Nuevo plugin features public function player.related(), which allows to show related videos container programmatically. For example, if you wish to display related container on each pause event:

Code snippet

player.on("pause", function(){
player.related();
});