Cloudinary Video Player

Recommendations

Recommendations documentation

Example Code:

      

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

      
      

        // Set video sources
        var source1 = {
          publicId: 'surf_competition',
          info: {
            title: 'Surf competition',
            subtitle: 'A movie about a surf competition',
            description: 'A description of the surf competition movie'
          }
        };

        var source2 = {
          publicId: 'finish_line',
          info: {
            title: 'Finish line',
            subtitle: 'A short video of a finish line',
            description: 'A description of the finish line 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 = cloudinary.videoPlayer('player', { cloud_name: 'demo', autoShowRecommendations: true });

        player.source(source1);