Cloudinary Video Player
Advanced Poster Configurations
Custom image poster
Specific frame poster
Poster options transformations-array
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>
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
player1 = cld.videoPlayer('player-image-poster', {
publicId: 'snow_horses'
});
player2 = cld.videoPlayer('player-frame-0', {
publicId: 'snow_horses',
posterOptions: {
transformation: {
startOffset: "0"
}
}
});
player3 = cld.videoPlayer('player-poster-options', {
publicId: 'snow_horses'
});