Video.js Related Videos container

DOCUMENTATION

Setup related videos 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 click appropriate Settings button menu. You can define up to 12 related videos and minimum is 3 videos. 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


<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 Nuevolab 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.


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