Cloudinary Video Player

Transformations Arrays

via source()

via player()

via data-cld-transformation

Full documentation

Example Code:

      

        <video
          id="player-1"
          playsinline
          controls
          muted
          autoplay
          class="cld-video-player">
        </video>

        <video
          id="player-2"
          playsinline
          controls
          muted
          autoplay
          class="cld-video-player"
          data-cld-source='{ "publicId": "dog", "info": { "title": "Dog", "subtitle": "Short movie about a dog" } }'>
        /video>

        <video
          id="player-3"
          playsinline
          controls
          muted
          autoplay
          class="cld-video-player"
          data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
          data-cld-transformation='[{ "width": "400", "crop": "limit" },{ "effect": "blur:500" },{ "effect": "saturation:-100" }]'>
        </video>

      
      

        var player = cloudinary.videoPlayer('player-1', { cloud_name: 'demo' }));

        player.source({
          publicId: 'snow_horses',
          info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
          transformation: [
            { width: 400, crop: 'limit' },
            { effect: 'blur:500' },
            { effect: 'saturation:-100' },
          ],
        });

        var player2 = cloudinary.videoPlayer('player-2', {
          cloud_name: 'demo',
          transformation: [
            { width: 400, crop: 'limit' },
            { effect: 'blur:500' },
            { effect: 'saturation:-100' },
          ],
        });

        var player3 = cloudinary.videoPlayer('player-3', { cloud_name: 'demo' });