Up Next Plugin

Up Next Demo

The Up Next plugin gives you the possibility to keep viewers engaged with your content for a longer time. For a customized period of time before the video ends, a smooth bottom right bar will offer the viewer new content to watch. Additionally, in the end, the set of suggested videos will be presented in a separate container with an option to navigate between them.
Imagine the list of episodes or tutorial parts that the user can follow next to play. This way, you will have the possibility to increase your impact per viewer and maximize your efforts.
The most simple setup is with one next video. If selected, the next video will play through the same player container. Check the code setup below with a single m3u8 HLS video.

Code snippet

<!-- "Load Videojs and UpNext css stylesheet -->
<link href="//path-to/videojs/skins/treso/videojs.css" rel="stylesheet">
<link href="//path-to/videojs/plugins/upnext.css" rel="stylesheet">

<!-- Setup main video element and load all javascript, including upnext plugin -->
<script src="//path-to/videojs/videojs.min.js"></script>
<script src="//path-to/videojs/nuevo.min.js"></script>
<script src="//path-to/videojs/plugins/upnext.min.js"></script>

<!-- Initialize player, Nuevo and Upnext plugins -->
<script>
var player = videojs("my_player");
player.nuevo({contextMenu:false});
player.upnext({
sources:[{ src:"//path-to-playlist.m3u8",type:"application/x-mpegURL"}],
poster: "//url-to-next-video-poster.jpg",
title: "Next video title.",
duration:"11:30"
});
</script>

It is possible to redirect the next video to another URL with a video instead of playing it through the same player. It's enough to replace the next video source with a redirect URL.

Code snippet

player.upnext({
nextURL: "//url-to-page-with-next-video",
target: "_self",  <!-- Link target, default is "_blank" -->
poster: "//url-to-next-video-poster.jpg",
title: "Next video title.",
duration:"11:30"
});

If you plan to set up multiple next videos, you will need an array of video items. It's important to set the first video item, exactly the same as the main video.

Code snippet

var upnextList = [
{
sources:[{ src:"//path-to-playlist.m3u8",type:"application/x-mpegURL"}],
poster: "//url-to-next-video-poster.jpg",
title: "Next 1 video title.",
duration:"11:30"
},
{
sources:[{ src:"//path-to-file.mp4",type:"video/mp4"}],
poster: "//url-to-next-video-poster.jpg",
title: "Next 2 video title.",
duration:"12:50"
},
{
sources:[
{src:"//path-to-file_360.mp4",type:"video/mp4", res:"360",label:"360p" default:true},
{src:"//path-to-file_720.mp4",type:"video/mp4", res:"720",label:"720p"},
{src:"//path-to-file_1080.mp4",type:"video/mp4", res:"1080",label:"1080p"}
],
poster: "//url-to-next-video-poster.jpg",
title: "Next 3 video title.",
duration:"09:40"
},
{
sources:[
{src:"//path-to-file.mp4",type:"video/mp4"},
{src:"//path-to-file.webm"}
],
poster: "//url-to-next-video-poster.jpg",
title: "Next 3 video title.",
duration:"06:35"
}
];
player.upnext( upnextList );

By default, the right bar suggestion is titled "Up Next". You can change this text using the appropriate option. It is also possible to set a custom time offset value before the end of the main video to show upnext suggestions. Default offset value is 30 (seconds).

Code snippet

player.upnext( upnextList, {nextTitle: "Next episode", offset: 60} );