Adaptive Video Streaming

Take advantage of Cloudinary's automatic generation of adaptive bitrate streaming files to automatically adjust the resolution of your video in 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 adaptive streaming 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: */

var cld = cloudinary.Cloudinary.new({ cloud_name: 'cloud' })

// Initialize player
var player = cld.videoPlayer('example-player')

// Modify player source and play.
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 = cld.videoPlayer('demo-events-player',
    // 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 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 player
    var player = cld.videoPlayer('example-player');
    
    /* 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 = cld.videoPlayer('example-player', 
    { autoShowRecommendations: true });
    
    player.source(source1);