Cloudinary Video Player

Profiles

Player with default profile

Example Code:

    

      <video
        id="player-default-profile"
        controls
        autoplay
        muted
        class="cld-video-player"
        width="500">
      </video>

      
      
        window.addEventListener('load', async function() {
          const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
            cloudName: 'demo',
            profile: 'cld-default',
          });

          playerWithDefaultProfile.source('sea_turtle');
        }, false);
      
    

Player with custom profile

Example Code:

    

      <video
        id="player-custom-profile"
        controls
        autoplay
        muted
        class="cld-video-player"
        width="500">
      </video>

      
      
        window.addEventListener('load', async function() {
          const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
            cloudName: 'prod',
            profile: 'myCustomProfile',
          });

          playerWithCustomProfile.source('samples/cld-sample-video');
        }, false);
      
    

Player with custom profile and overrides

Example Code:

    

      <video
        id="player-custom-profile-overrides"
        controls
        autoplay
        muted
        class="cld-video-player"
        width="500">
      </video>

      
      
        window.addEventListener('load', async function() {
          const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
            cloudName: 'prod',
            profile: 'myCustomProfile',
            colors: {
              base: "#1532a8"
            },
            seekThumbnails: false,
            aiHighlightsGraph: true,
          });

          playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
        }, false);