Videojs Related Videos container

Setup related videos fro Videojs with Nuevo plugin

As you can see in video example above Nuevo plugin for Video.js player allows to display related videos container with videos thumbnails and links to appropriate video URL for each. It appears on screen when you select "Related" item from Settings button menu. You can define unlimited related videos and minimum is 2 related videos. Related container is resposive. 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 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 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 related option among other Nuevo plugin's options, like in player setup code below wfor 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

From version 5.7.0 Nuevo plugin features public function showRelated, which allows to show related videos container programmatically. For example if you wisth to display related container on each pause event:

Code snippet

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