Cloudinary Video Player

Profiles

Player with default profile

Player with custom (blur) profile

Example Code:

    

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

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

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

          playerWithDefaultProfile.source('sea_turtle');

          const playerWithCustomProfile = await cloudinary.videoPlayerWithProfile('player-custom-profile', {
            cloud_name: 'dwaq5xqm4',
            profile: 'https://res.cloudinary.com/dwaq5xqm4/raw/upload/v1/profiles/default_profile.json',
          });

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