Cloudinary Video Player

Cloudinary analytics

Example Code:

      

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

      
      
        <script type="text/javascript">
          const player = cloudinary.videoPlayer('player', {
               cloudName: 'demo',
               secure: true,
               cloudinaryAnalytics: true
            });

            player.source('elephants');

            const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
              cloudName: 'demo',
              secure: true,
              cloudinaryAnalytics: true
            });

            adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
        </script>
      
    

Cloudinary analytics with custom data - plain object

Only those 5 params are supported & value needs to be string - otherwise it will be filtered out.

Example Code:

      

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

      
      
        <script type="text/javascript">
          const playerCustomDataPlainObject = cloudinary.videoPlayer('player-custom-data-plain-object', {
            cloudName: 'demo',
            secure: true,
            cloudinaryAnalytics: {
              customData: {
                customData1: 'my-value',
                customData2: '11111',
                customData3: 'custom-data-3-value',
                customData4: 'Hello world',
                customData5: 'false',
              },
            },
          });

          playerCustomDataPlainObject.source('elephants');
        </script>
      
    

Cloudinary analytics with custom data - function

If you need to provide custom data with some dynamic values - you can use function that returns object with supported keys.

Example Code:

      

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

      
      
        <script type="text/javascript">
          const playerCustomDataFunction = cloudinary.videoPlayer('player-custom-data-function', {
            cloudName: 'demo',
            secure: true,
            cloudinaryAnalytics: {
              customData: () => ({
                customData1: 'my-value',
                customData3: '11111',
              }),
            },
          });

          playerCustomDataFunction.source('elephants');
        </script>