Up Next Plugin

Up Next Demo

Up Next plugin gives you the possibility to get viewers engaged with your content for a longer time. For a customised period of time before video end, a smooth bottom right bar will offer the viewer a new content to watch. Additionally, next video will be presented at then end screen, with a timer counting down until the next video is automatically played.
Imagine the list of episodes or tutorial parts that user can follow next to play. This way you will have the possibility to increase your impact per viewer and maximize your efforts.

Up Next plugin by Nuevodevel differs much from those offered by other players. The most simple is setup with one next video. If selected, next video will play through the same player container.Check setup below with single m3u8 HLS next 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 also possible to redirect to other URL with next video instead of playing it through the same player. Enough is to replace next video source with 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 setup multiple next videos, you will need next videos playlist - an array of video items, each with video source defined. Video source(s) can be of different type, including set of mp4 videos, each of different quality.
It's important to set first next video, exactly same as main video element source.

Code snippet

player.upnext([
{
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"
}
]);

Next video is updated automatically. If the user skip right bar suggestion, next suggestion will be presented one more time when video ends. The user will be also able to navigate between video from next videos list and decide to select one, or cancel next selection and replay current video.

By default right bar suggestion is titled "Up Next". Webmaster can chage this text using simple function once next plugin list is initialized, e.g.

Code snippet

player.upnext({
player.upnext.title("Next Episode");
});

Right bar next video suggestion by default appears 30 seconds before video end. This value can be also changed, e.g.

Code snippet

player.upnext({
player.upnext.endOffset(60);
});