Up Next Plugin

Up Next Demo

The 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, the 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.

An Up Next plugin by Nuevodevel.com differs much from those offered by other players. The most simple is setup with one next video. If selected, the 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 possible to redirect next video to another URL with video instead of playing it through the same player. Enough is to replace the 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 a playlist - an array of video items, each with video source defined. Video source(s) can be of different type, including a 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

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 );

The next video is updated automatically. If the user skips 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 the list of videos and decide to select one, or cancel next selection and replay the current video.

By default right bar suggestion is titled "Up Next". Webmaster can change this text using appropriate option. It is also possible to set custom time offset value before the end of video to show upnext suggestion.

Code snippet

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