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 and it sligthly differs from setup with multiple next videos.
Check setup below with single m3u8 HLS next video.
Code snippet
<!-- You need to load UpNext css 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 --> var player = videojs("my_player"); player.nuevo(); 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" });
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"
});
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" } ]);
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"); });
Code snippet
player.upnext({ player.upnext.endOffset(60); });