Cloudinary Video Player

Interaction Areas player config:

      

           cloudinary.videoPlayer('player', {
              cloud_name: 'demo'
              interactionDisplay: {
                  theme:{
                    template : 'pulsing'  // 'pulsing' / 'shadowed' (the default is 'pulsing')
                  },
                  layout: {
                      enable: true / false (the default is true),
                      showAgain: true / false (the default is false)
                  }
              }
          });
      
  

Define Interaction Areas manually

      

         <video
          id="player"
          width="250"
          controls
          muted
          class="cld-video-player">
         </video>
      

      

      var sources = {
         topSource : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
         bottomSource: 'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
      }

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

      player.source('video-player/girl_in_a_dress',{
          interactionAreas: {
            enable: true,
            template:  [
                {
                  left : 10 ,
                  top: 10,
                  width: 80,
                  height: 40,
                  id: 'topSource'
                },
                {
                  left : 10 ,
                  top: 75,
                  width: 80,
                  height : 20,
                  id: 'bottomSource'
                }
             ],
             onClick: function (event) {
                event.zoom(sources[event.item.id]);
            }
          }
      });
      

  

Interaction Areas using predefined templates

      
         <video
          id="player"
          width="250"
          controls
          muted
          class="cld-video-player">
         </video>
      

      

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

       var sources = {
        top:'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
        middle:'https://www2.hm.com/en_in/productpage.0687948004.html',
        bottom:'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
      }

      player.source('video-player/girl_in_a_dress', {
        interactionAreas: {
          enable: true,
          template: 'portrait', // or landscape/all/center
          onClick: function(event) {
            // 'event.item.id' is an id that been defined in the vtt file
            var src = sources[event.item.id];
            if(event.item.id === 'middle'){
                if(window.confirm("Do you like this shirt ?")) {
                    window.open(src, '_blank').focus();
                }
            }
            else {
                event.zoom(src)
            }
          }
        }
      });
      

  

Using your own VTT file

      
         <video
          id="player"
          width="250"
          controls
          muted
          class="cld-video-player">
         </video>
      

      

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

        var sources = {
            center : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
        }

        player.source('video-player/girl_in_a_dress', {
            interactionAreas: {
                enable: true,
                vttUrl: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt',
                onClick: function(event) {
                    // 'event.item.id' is an id that been defined in the vtt file
                    event.zoom(sources[event.item.id]);
                }
            }
        });
      

  

Auto-zoom video cropping

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

      

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

      // auto-zoom works only if the source is a cloudinary source object or a public id
      // does not work for a full raw url
      player.source('video-player/girl_in_a_dress', {
           transformation:{
                quality: 'auto',
            },
            interactionAreas: {
                enable: true,
                template: 'portrait',
                onClick: function (event) {
                    //in case you not passing a source to the zoom function auto zoom will be enabled
                    event.zoom();
                }
            }
      });