Cloudinary Video Player

Advanced Poster Configurations

Full documentation

Example Code:

      
        <video
          id="player-image-poster"
          playsinline
          controls
          class="cld-video-player cld-fluid"
          data-cld-transformation='{ "effect": ["saturation:-100"] }'
          data-cld-poster-options='{ "publicId": "sample", "effect": ["saturation:-100"] }'>
        </video>

        <video
          id="player-frame-0"
          playsinline
          controls
          class="cld-video-player cld-fluid">
        </video>

        <video
          id="player-poster-options"
          playsinline
          controls
          class="cld-video-player cld-fluid"
          data-cld-poster-options='{ "transformation": [{"width": "640", "height": "360", "crop": "pad", "effect": "grayscale" },{"overlay":"cloudinary_icon", "width":"300"},{"quality": "auto", "fetch_format": "auto"}] }'>
        </video>

        <video
          id="player-raw"
          playsinline
          controls
          class="cld-video-player cld-fluid"
        </video>

      
      

        player1 = cloudinary.videoPlayer('player-image-poster', {
          cloud_name: 'demo',
          publicId: 'snow_horses'
        });

        player2 = cloudinary.videoPlayer('player-frame-0', {
          cloud_name: 'demo',
          publicId: 'snow_horses',
          posterOptions: {
            transformation: {
              startOffset: "0"
            }
          }
        });

        player3 = cloudinary.videoPlayer('player-poster-options', {
          cloud_name: 'demo',
          publicId: 'dog'
        });

        player4 = cloudinary.videoPlayer('player-raw', {
          cloud_name: 'demo',
          publicId: 'https://res.cloudinary.com/demo/video/upload/sp_auto/sea_turtle.m3u8'
        });