Videojs Related Videos container

In the video example above, the Nuevo plugin allows you to display related videos container with video thumbnails and links to the appropriate video URL for each. A related container appears on the screen when you select the "Related" item from the Settings menu. You can define an unlimited number of related videos, and the minimum is two related videos. On desktop computers, you can scroll related video items using navigation arrows; on touch devices, use your finger to scroll for the next or previous set of related video items.Information about related video details must be defined as objects in the Javascript array. Check out the code example below to see 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>

Nuevo plugin setup code

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

Code snippet

<script>
const player = videojs('my_player', {license: "key"});
player.nuevo({
logo: '//domain.com/path/to/logo.png',
logourl: '//domain.com',
related: related_videos
});
</script>

Show Related programmatically

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

Code snippet

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