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.

Player size Width: px
Streaming Profile:
Stream adaptively
3840x2160
2560x1440
1920x1080
1280x720
960x540
640x360
480x270
320x240
/* 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).

    VAST Tag:
    /* 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);
    Further reading: Full API Reference