Adaptive Video Streaming
Take advantage of Cloudinary's automatic generation of adaptive bitrate streaming files to automatically adjust the resolution of your video in real time to best match the player dimensions, available bandwidth and CPU capacity of each viewer.
/* To use dynamic adaptive streaming over HTTP formats such as HLS and MPEG-DASH,
simply define 'sourceTypes' to the desired format ('dash' or 'hls').
You can define a desired profile using the 'transformation' param.
Sample code: */
// Initialize player
var player = cloudinary.videoPlayer('example-player', { cloud_name: 'cloud' })
// Modify player source and play hls adaptive streaming
player.source('rafting', { sourceTypes: ['hls'],
transformation: { streaming_profile: 'full_hd' } }).play();
Events and analytics
You can register to video player events and then use these events to create custom video player controls or to trigger other custom behaviors in your application. In addition, the Video Player supports tracking events for analytics platforms such as Google Analytics.
Triggered events:
// Init player with events and analytics
var player = cloudinary.videoPlayer('demo-events-player',
cloud_name: 'cloud' ,
// In this section we define the list of events that will be triggered to the page, in addition to a predefined list of events
{ playedEventTimes: [3, 10],
// In this section we define the (complete) list of events that will be sent to analytics
analytics: { // Enable player analytics
events: [
'play',
'pause',
'percentsplayed',
'start',
'ended',
'fullscreenchange']}});
// Modify player source
player.source('forest_bike').play();
Video Playlist
You can create a playlist based on a list of public IDs or for all videos in your Cloudinary account with a specified tag. After you have defined a playlist, you can use playlist methods to control the list. For example, you can jump to the next or previous video, jump to a specific video in the playlist by index, determine whether to show of preview of the upcoming video, whether to auto-advance to the next video when the previous one ends, and more.
// Define Playlist Sources
var source1 = { publicId: 'snow_horses', sourceTypes: ['hls'], transformation: {streaming_profile: 'full_hd'}};
var source2 = { publicId: 'sea_turtle', sourceTypes: ['hls'], transformation: {streaming_profile: 'full_hd'}};
// ... until the last source in the playlist
// Initialize Cloudinary HTML5 video player
// with playlist widget
var player = cloudinary.videoPlayer('example-player',{
cloud_name: 'cloud' ,
playlistWidget: {
direction: "horizontal",
total: 4
}});
/* Define a playlist with auto advance to next video,
repeat the playlist when final video ends,
and present upcoming video 5 seconds
before the current video ends. */
player.playlist([source1, source2],
{ autoAdvance: true, repeat: true, presentUpcoming: 5 });
recommended content
You can define recommended videos when setting a player's video source. The recommendations are shown as thumbnails in a recommendation overlay when the video ends. The primary recommendation includes the title, subtitle, and description of the recommended video (if defined).
/* Define Playlist Sources
As shown in the playlist example.
Recommendations can be as simple as an array of other
video source objects*/
source1.recommendations = [source2,source3,source4,source5];
// For async fetching of recommendations
// (e.g. fetching from database), promises can be used
source2.recommendations = new Promise((resolve, _) => {
setTimeout(() => {
resolve([source1]);
}, 3000); })
// Initialize player
var player = cloudinary.videoPlayer('example-player',{
cloud_name: 'cloud' ,
autoShowRecommendations: true
});
player.source(source1);
Videos Ads
Cloudinary HTML5 video player ad capabilities allow you to monetize your content with ads. Our player is compliant with the leading ad standards: VAST, VPAID and VMAP, as well as ads that are managed with Google’s DoubleClick and AdSense. Use ad tags in your video player definition to activate a comprehensive set of advertising options, including banners and pre-, mid- and post-rolls (with or without skip option).
/* Video Ads are added by
providing the ad server URL.
It can be used with a single video or with
multiple sources in a playlist */
var adTagUrl = "https://pubads.g.doubleclick.net/...";
// Initialize player with video ads
var player = cloudinary.videoPlayer('example-player', { cloud_name: 'cloud' , ads: {adTagUrl: adTagUrl} });
// Define a single source or a playlist
player.source(source1);