<< Back to examples index

Cloudinary Video Player

Recommendations

Recommended videos can be defined when setting a player's video source. The recommendations will be shown in the recommendation overlay when a video ends.
To automatically show recommendations:

1. Pass autoShowRecommendations: true when creating the player (or set player.autoShowRecommendations(true) afterwards)
2. When setting a source, add an additional recommendations parameter.
   The recommendations param's value may be one of the following:
   • An array of video source objects
   • A function which resolves into an array of video source objects
   • A Promise which resolves into an array of video source objects

Recommendations in playlists

Playlists honor the player's autoShowRecommendations param, but will only show at the end of a video when auto advance is disabled (autoAdvance: false)
The following behavior applies to recommendations in playlists:

• When the currently playing video's recommendations were explicitly set, those will be shown.
  Note: In this case, if a viewer selects a recommended item, the player exits the playlist context.
• When the currently playing video's recommendations were not set, the next videos in the playlist are automatically shown as recommendations.

Video info (title, subtitle, description)

To fully leverage the recommendations overlay, it is recommended that you set the title, subtitle and description when creating source objects, using the info param:

var source1 = {
  publicId: 'book',
  info: {
    title: 'Cloud Book Study',
    subtitle: 'A short video with a nice book animation',
    description: 'A description of the book movie.'
  }
}

Video info on playlistByTag

When using player.playlistByTag, source.info will automatically get populated from Cloudinary's resource context (which can be defined both through the Cloudinary API or the Media Library). Make sure that the context keys are named exactly: 'title', 'subtitle' and 'description'.

Recommendations overlay items

The recommendations overlay currently supports showing up to 4 items. You may pass more than 4, in that case the first 4 items will be displayed:

• One primary item: large poster with detailed information (title, subtitle and description)
• Three secondary item: small video poster thumbnail with the the video title

Example Code:

      HTML:

      <video
        id="example-player"
        controls
        muted
        autoplay
        class="cld-video-player cld-video-player-skin-dark"
        data-cld-transformation='{ "width": 500, "crop": "limit" }'>
      </video>

      <div id="source-data">
        <span id="public-id-placeholder"></span><br>
        <span id="source-url-placeholder"></span>
      </div>


      JavaScript:

      var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

      // Set video sources
      var source1 = {
        publicId: 'oceans',
        info: {
          title: 'Oceans',
          subtitle: 'A movie about oceans'
          description: 'A description of the oceans movie'
        }
      };

      var source2 = {
        publicId: 'book',
        info: {
          title: 'Cloud Book Study',
          subtitle: 'A short video with a nice book animation',
          description: 'A description of the book movie.'
        }
      };

      // Recommendations can be as simple as an array of other video source objects
      source1.recommendations = [source2];

      // For async fetching of recommendations (e.g. fetching from database), promises can be used
      source2.recommendations = new Promise((resolve, _) => {
        console.log('Going to database...');
        setTimeout(() => {
          console.log('Fetched source from database.', source1)
          resolve([source1]);
        }, 3000);
      });

      // Initialize player
      var player = cld.videoPlayer('example-player', { autoShowRecommendations: true });

      player.source(source1);

      function updateSource() {
        var divElem = document.querySelector("div#source-data");

        publicIdElem = divElem.querySelector("#public-id-placeholder");
        sourceUrlElem = divElem.querySelector("#source-url-placeholder");

        publicIdElem.innerText = "Public Id: " + player.currentPublicId();
        sourceUrlElem.innerText = "Source URL: " + player.currentSourceUrl();

        divElem.style.display = 'block';
      };

      player.on('sourcechanged', updateSource);