npm - cloudinary-video-player - Versions diffs - 1.6.2-edge.13 - Mend

cloudinary-video-player 1.6.2-edge.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/.eslintignore +4 -0
package/.snyk +19 -0
package/.travis.yml +8 -0
package/CHANGELOG.md +329 -0
package/LICENSE +21 -0
package/README.md +87 -0
package/dist/cld-video-player.css +2110 -0
package/dist/cld-video-player.js +5249 -0
package/dist/cld-video-player.light.css +1766 -0
package/dist/cld-video-player.light.js +1399 -0
package/dist/cld-video-player.light.min.css +1 -0
package/dist/cld-video-player.light.min.js +2 -0
package/dist/cld-video-player.light.min.js.LICENSE.txt +23 -0
package/dist/cld-video-player.min.css +1 -0
package/dist/cld-video-player.min.js +2 -0
package/dist/cld-video-player.min.js.LICENSE.txt +26 -0
package/dist/fonts/cloudinary_icon_for_black_bg.svg +69 -0
package/dist/fonts/cloudinary_icon_for_white_bg.svg +69 -0
package/docs/360.html +102 -0
package/docs/_template.html +93 -0
package/docs/adaptive-streaming.html +297 -0
package/docs/analytics.html +140 -0
package/docs/api.html +302 -0
package/docs/audio.html +136 -0
package/docs/autoplay-fallback.html +138 -0
package/docs/autoplay-on-scroll.html +107 -0
package/docs/codec-fallback.html +158 -0
package/docs/colors.html +135 -0
package/docs/components.html +284 -0
package/docs/custom-cld-errors.html +134 -0
package/docs/floating-player.html +98 -0
package/docs/fluid.html +117 -0
package/docs/force-hls-subtitles-ios.html +159 -0
package/docs/index.html +83 -0
package/docs/interaction-area.html +398 -0
package/docs/live-customer.html +128 -0
package/docs/multiple-players.html +125 -0
package/docs/playlist-by-tag-cap.html +182 -0
package/docs/playlist-by-tag.html +133 -0
package/docs/playlist.html +133 -0
package/docs/poster.html +155 -0
package/docs/raw-url.html +104 -0
package/docs/recommendations.html +155 -0
package/docs/scripts.js +156 -0
package/docs/seek-thumbs.html +90 -0
package/docs/shoppable.html +335 -0
package/docs/subtitles-and-captions.html +267 -0
package/docs/transformations.html +171 -0
package/docs/ui-config.html +108 -0
package/docs/vast-vpaid.html +149 -0
package/env.example.js +6 -0
package/env.js +6 -0
package/jest-puppeteer.config.js +14 -0
package/jest.config.js +196 -0
package/package.json +99 -0
package/sandbox.config.json +3 -0
package/setupJest.js +1 -0
package/src/assets/fonts/VideoJS.svg +120 -0
package/src/assets/fonts/VideoJS.ttf +0 -0
package/src/assets/fonts/VideoJS.woff +0 -0
package/src/assets/fonts/icons.json +120 -0
package/src/assets/icons/cloudinary_icon_for_black_bg.svg +69 -0
package/src/assets/icons/cloudinary_icon_for_white_bg.svg +69 -0
package/src/assets/icons/cloudinary_logo_for_dark_bg.svg +188 -0
package/src/assets/icons/cloudinary_logo_for_white_bg.svg +188 -0
package/src/assets/icons/info-circle.svg +17 -0
package/src/assets/styles/ads-label.scss +16 -0
package/src/assets/styles/components/interaction-areas.scss +158 -0
package/src/assets/styles/components/playlist.scss +213 -0
package/src/assets/styles/components/themedButton.scss +48 -0
package/src/assets/styles/components/thumbnail.scss +94 -0
package/src/assets/styles/components/title-bar.scss +67 -0
package/src/assets/styles/components/triangle-volume-bar.scss +52 -0
package/src/assets/styles/icons.scss +257 -0
package/src/assets/styles/main.scss +324 -0
package/src/assets/styles/mixins/aspect-ratio.scss +16 -0
package/src/assets/styles/mixins/disable-transition.scss +3 -0
package/src/assets/styles/mixins/mixins.scss +5 -0
package/src/assets/styles/mixins/skin.scss +64 -0
package/src/assets/styles/variables.scss +2 -0
package/src/assets/styles/videojs-ima.scss +252 -0
package/src/components/component-utils.js +20 -0
package/src/components/index.js +21 -0
package/src/components/interaction-area/interaction-area.const.js +30 -0
package/src/components/interaction-area/interaction-area.service.js +223 -0
package/src/components/interaction-area/interaction-area.utils.js +236 -0
package/src/components/jumpButtons/jump-10-minus.js +21 -0
package/src/components/jumpButtons/jump-10-plus.js +20 -0
package/src/components/logoButton/logo-button.const.js +3 -0
package/src/components/logoButton/logo-button.js +30 -0
package/src/components/logoButton/logo-button.scss +15 -0
package/src/components/playlist/components/playlist-button.js +34 -0
package/src/components/playlist/components/playlist-next-button.js +18 -0
package/src/components/playlist/components/playlist-previous-button.js +18 -0
package/src/components/playlist/components/playlist.js +5 -0
package/src/components/playlist/components/playlist.scss +15 -0
package/src/components/playlist/components/upcoming-video-overlay.js +149 -0
package/src/components/playlist/components/upcoming-video-overlay.scss +86 -0
package/src/components/playlist/layout/playlist-layout-custom.js +21 -0
package/src/components/playlist/layout/playlist-layout-horizontal.js +16 -0
package/src/components/playlist/layout/playlist-layout-vertical.js +19 -0
package/src/components/playlist/layout/playlist-layout.js +110 -0
package/src/components/playlist/panel/playlist-panel-item.js +86 -0
package/src/components/playlist/panel/playlist-panel.js +92 -0
package/src/components/playlist/playlist-widget.js +119 -0
package/src/components/playlist/playlist.const.js +14 -0
package/src/components/playlist/playlist.js +413 -0
package/src/components/playlist/thumbnail/thumbnail.js +69 -0
package/src/components/progress-control-events-blocker/progress-control-events-blocker.js +17 -0
package/src/components/qualitySelector/quality-selector.scss +10 -0
package/src/components/qualitySelector/qualitySelector.js +152 -0
package/src/components/recommendations-overlay/index.js +3 -0
package/src/components/recommendations-overlay/recommendations-overlay-content.js +57 -0
package/src/components/recommendations-overlay/recommendations-overlay-hide-button.js +18 -0
package/src/components/recommendations-overlay/recommendations-overlay-item.js +35 -0
package/src/components/recommendations-overlay/recommendations-overlay-primary-item.js +81 -0
package/src/components/recommendations-overlay/recommendations-overlay-secondary-item.js +48 -0
package/src/components/recommendations-overlay/recommendations-overlay-secondary-items-container.js +35 -0
package/src/components/recommendations-overlay/recommendations-overlay.js +94 -0
package/src/components/recommendations-overlay/recommendations-overlay.scss +182 -0
package/src/components/shoppable-bar/layout/bar-layout.js +111 -0
package/src/components/shoppable-bar/layout/shoppable-panel-toggle.js +64 -0
package/src/components/shoppable-bar/layout/shoppable-products-overlay.js +87 -0
package/src/components/shoppable-bar/panel/shoppable-panel-item.js +105 -0
package/src/components/shoppable-bar/panel/shoppable-panel.js +172 -0
package/src/components/shoppable-bar/shoppable-post-widget.js +110 -0
package/src/components/shoppable-bar/shoppable-widget.const.js +52 -0
package/src/components/shoppable-bar/shoppable-widget.js +111 -0
package/src/components/shoppable-bar/shoppable-widget.scss +359 -0
package/src/components/themeButton/themedButton.const.js +3 -0
package/src/components/themeButton/themedButton.js +25 -0
package/src/components/title-bar/title-bar.js +79 -0
package/src/config/defaults.js +25 -0
package/src/extended-events.js +228 -0
package/src/index.js +18 -0
package/src/mixins/eventable.js +54 -0
package/src/mixins/playlistable.js +106 -0
package/src/plugins/analytics/index.js +245 -0
package/src/plugins/autoplay-on-scroll/index.js +86 -0
package/src/plugins/cloudinary/common.js +216 -0
package/src/plugins/cloudinary/event-handler-registry.js +46 -0
package/src/plugins/cloudinary/index.js +345 -0
package/src/plugins/cloudinary/models/audio-source/audio-source.const.js +11 -0
package/src/plugins/cloudinary/models/audio-source/audio-source.js +82 -0
package/src/plugins/cloudinary/models/base-source.js +107 -0
package/src/plugins/cloudinary/models/image-source.js +26 -0
package/src/plugins/cloudinary/models/video-source/video-source.const.js +32 -0
package/src/plugins/cloudinary/models/video-source/video-source.js +239 -0
package/src/plugins/cloudinary/models/video-source/video-source.utils.js +57 -0
package/src/plugins/colors/index.js +303 -0
package/src/plugins/context-menu/components/context-menu-item.js +12 -0
package/src/plugins/context-menu/components/context-menu.js +63 -0
package/src/plugins/context-menu/context-menu.scss +30 -0
package/src/plugins/context-menu/contextMenuContent.js +53 -0
package/src/plugins/context-menu/index.js +134 -0
package/src/plugins/dash/index.js +26 -0
package/src/plugins/dash/setup-audio-tracks.js +112 -0
package/src/plugins/dash/setup-text-tracks.js +195 -0
package/src/plugins/dash/videojs-dash.js +372 -0
package/src/plugins/floating-player/floating-player.scss +74 -0
package/src/plugins/floating-player/index.js +129 -0
package/src/plugins/ima/index.js +1775 -0
package/src/plugins/index.js +31 -0
package/src/plugins/interactive-plugin/index.js +10 -0
package/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js +98 -0
package/src/plugins/videojs-http-source-selector/components/SourceMenuItem.js +52 -0
package/src/plugins/videojs-http-source-selector/plugin.js +82 -0
package/src/plugins/videojs-http-source-selector/plugin.scss +9 -0
package/src/plugins/vtt-thumbnails/index.js +526 -0
package/src/plugins/vtt-thumbnails/vtt-thumbnails.scss +29 -0
package/src/utils/api.js +32 -0
package/src/utils/apply-with-props.js +32 -0
package/src/utils/array.js +22 -0
package/src/utils/assign.js +27 -0
package/src/utils/attributes-normalizer.js +72 -0
package/src/utils/cloudinary.js +165 -0
package/src/utils/css-prefix.js +43 -0
package/src/utils/dom.js +74 -0
package/src/utils/find.js +28 -0
package/src/utils/fontFace.js +25 -0
package/src/utils/groupBy.js +12 -0
package/src/utils/index.js +29 -0
package/src/utils/matches.js +11 -0
package/src/utils/mixin.js +5 -0
package/src/utils/object.js +26 -0
package/src/utils/playButton.js +9 -0
package/src/utils/positioning.js +78 -0
package/src/utils/querystring.js +12 -0
package/src/utils/slicing.js +21 -0
package/src/utils/string.js +15 -0
package/src/utils/throttle.js +30 -0
package/src/utils/time.js +77 -0
package/src/utils/type-inference.js +35 -0
package/src/validators/validators-functions.js +48 -0
package/src/validators/validators-types.js +78 -0
package/src/validators/validators.js +110 -0
package/src/video-player.const.js +68 -0
package/src/video-player.js +761 -0
package/src/video-player.utils.js +123 -0
package/test/adaptive-streaming.test.js +38 -0
package/test/ads.test.js +35 -0
package/test/analytics.test.js +111 -0
package/test/api.test.js +111 -0
package/test/autoplay.scroll.test.js +23 -0
package/test/basic-ui.test.js +59 -0
package/test/colors.test.js +58 -0
package/test/components.test.js +21 -0
package/test/custom-error.test.js +24 -0
package/test/fluid.test.js +36 -0
package/test/isValidConfig.test.js +224 -0
package/test/mocks/cloudinary-core-mock.js +0 -0
package/test/mocks/styleMock.js +1 -0
package/test/multiplayer.test.js +25 -0
package/test/playlist.test.js +60 -0
package/test/puppeteer/vp-env.js +19 -0
package/test/recommendations.test.js +38 -0
package/test/title-bar.test.js +28 -0
package/test/ui-conf.test.js +49 -0
package/test/unit/cloudinaryConfig.test.js +22 -0
package/test/unit/cloudinaryUtils.test.js +53 -0
package/test/unit/utils.test.js +27 -0
package/test/unit/videoSource.test.js +454 -0
package/tsconfig.json +15 -0
package/types/video-player-tests.js +12 -0
package/types/video-player-tests.ts +31 -0
package/types/video-player.d.ts +570 -0

package/docs/force-hls-subtitles-ios.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Cloudinary Video Player</title>
+    <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
+          rel="icon" type="image/png">
+    <!-- Bootstrap -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <!-- highlight.js -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+    <!--
+      We're loading scripts & style dynamically for development/testing.
+      Real-world usage would look like this:
+      <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
+      <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
+      <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+    -->
+    <script type="text/javascript" src="./scripts.js"></script>
+    <script type="text/javascript">
+      window.addEventListener('load', function() {
+        var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+        var player = cld.videoPlayer('player', {
+          html5: {
+            hls: {
+              overrideNative: true,
+            },
+          },
+        });
+        player.source(
+            'sea_turtle',
+            {
+              sourceTypes: ['hls'],
+              transformation: {streaming_profile: 'hd'},
+              textTracks: {
+                captions: {
+                  label: "English(captions)",
+                  language: "en",
+                  default: true,
+                  url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
+                },
+                subtitles: [
+                  {
+                    label: "English",
+                    language: "en",
+                    url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
+                  }
+               ]
+              }
+            }
+      );
+      }, false);
+    </script>
+</head>
+<body>
+<div class="container p-4 col-12 col-md-9 col-xl-6">
+    <nav class="nav mb-2">
+        <a href="./index.html">&#60;&#60; Back to examples index</a>
+    </nav>
+    <h1>Cloudinary Video Player</h1>
+    <h3 class="mb-4">Force HLS Subtitles</h3>
+    <video
+            id="player"
+            controls
+            muted
+            autoplay
+            class="cld-video-player"
+            crossorigin="anonymous"
+            width="500">
+    </video>
+    <p class="mt-4">
+        <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
+    </p>
+    <h3 class="mt-4">Example Code:</h3>
+    <p>To force subtitles in an HLS stream even if the manifest does not declare them, add the following to the player configuration and then add your text tracks in the source:</p>
+        <pre>
+        <code class="language-javascript">
+            html5: {
+              hls: {
+                overrideNative: true,
+                },
+            }
+        </code>
+        </pre>
+    <p>Make sure to add the following to your video element as the subtitles are coming from a different origin:</p>
+    <pre>
+      <code class="language-html">
+        crossorigin="anonymous"
+      </code>
+    </pre>
+    <p>See full example:</p>
+    <pre>
+      <code class="language-html">
+        &lt;video
+          id="player"
+          controls
+          muted
+          class="cld-video-player"
+          crossorigin="anonymous"
+          width="500"
+        &gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">  var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+        var player = cld.videoPlayer('player', {
+          html5: {
+            hls: {
+              overrideNative: true,
+            },
+          },
+        });
+        player.source(
+            'sea_turtle',
+            {
+              sourceTypes: ['hls'],
+              transformation: {streaming_profile: 'hd'},
+              textTracks: {
+                captions: {
+                  label: "English(captions)",
+                  language: "en",
+                  default: true,
+                  url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
+                },
+                subtitles: [
+                  {
+                    label: "English",
+                    language: "en",
+                    url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
+                  }
+               ]
+              }
+            }
+      );
+      </code>
+    </pre>
+</div>
+</body>
+</html>

package/docs/index.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
+  <!-- Bootstrap -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <!--
+    We're loading scripts & style dynamically for development/testing.
+    Real-world usage would look like this:
+    <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
+    <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
+    <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+  -->
+  <script type="text/javascript" src="scripts.js"></script>
+  <script type="text/javascript">
+    window.addEventListener('load', function(){
+      var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
+      player = cld.videoPlayer('player');
+    }, false);
+  </script>
+</head>
+<body>
+  <div class="container p-4 col-12 col-md-9 col-xl-6">
+    <h1 class="mb-4">Cloudinary Video Player</h1>
+    <video
+      id="player"
+      controls
+      muted
+      class="cld-video-player cld-video-player-skin-dark cld-fluid"
+      data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'>
+    </video>
+    <p class="mt-4">
+      <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation @ cloudinary.com/documentation</a>
+    </p>
+    <h3 class="mt-4">Some code examples:</h3>
+    <ul>
+      <li><a href="./api.html">API and Events</a></li>
+      <li><a href="./playlist.html">Playlist</a></li>
+      <li><a href="./playlist-by-tag.html">Playlist by Tag</a></li>
+      <li><a href="./autoplay-on-scroll.html">Autoplay on Scroll</a></li>
+      <li><a href="./multiple-players.html">Multiple Players</a></li>
+      <li><a href="./adaptive-streaming.html">Adaptive Streaming</a></li>
+      <li><a href="./audio.html">Audio Player</a></li>
+      <li><a href="./analytics.html">Analytics</a></li>
+      <li><a href="./components.html">Components</a></li>
+      <li><a href="./recommendations.html">Recommendations</a></li>
+      <li><a href="./fluid.html">Fluid Layouts</a></li>
+      <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
+      <li><a href="./360.html">360 Videos</a></li>
+      <li><a href="./floating-player.html">Floating Player</a></li>
+      <li><a href="./colors.html">Colors API</a></li>
+      <li><a href="./ui-config.html">Display Configurations</a></li>
+      <li><a href="./poster.html">Poster Options</a></li>
+      <li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
+      <li><a href="./force-hls-subtitles-ios.html">Force HLS Subtitles</a></li>
+      <li><a href="./custom-cld-errors.html">Custom Errors</a></li>
+      <li><a href="./codec-fallback.html">Codec and Fallback</a></li>
+      <li><a href="./live-customer.html">Live customer</a></li>
+      <li><a href="./shoppable.html">Shoppable Videos</a></li>
+      <li><a href="./transformations.html">Video Transformations</a></li>
+      <li><a href="./raw-url.html">Raw URL</a></li>
+      <li><a href="./seek-thumbs.html">Seek Thumbnails</a></li>
+    </ul>
+  </div>
+</body>
+</html>

package/docs/interaction-area.html ADDED Viewed

@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <style>
+        .video-container{
+            display: flex;
+            justify-content: center;
+        }
+  </style>
+  <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
+  <!-- Bootstrap -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+  <script type="text/javascript" src="./scripts.js"></script>
+  <script type="text/javascript">
+    window.addEventListener('load', function() {
+      var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+      var playerOption = {
+          bigPlayButton: false,
+          interactionAreas: {
+              theme:{
+                template : 'pulsing'
+              },
+              layout: {
+                  enable: true,
+                  showAgain: false
+              }
+          }
+      };
+      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 = cld.videoPlayer('manually', playerOption);
+      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]);
+          }
+        }
+      });
+      var videoZoomSources = {
+        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'
+      }
+      var player2 = cld.videoPlayer('custom-template', playerOption);
+      player2.source('video-player/girl_in_a_dress', {
+        interactionAreas: {
+          enable: true,
+          template: 'portrait',
+          onClick:function (event) {
+            var src = videoZoomSources[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)
+            }
+          }
+        }
+      });
+        var player3 = cld.videoPlayer('custom-vtt', playerOption);
+        var videoZoomSources3 = {
+            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'
+        }
+        player3.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.zoom(videoZoomSources3[event.item.id]);
+                }
+            }
+        });
+        var player4 = cld.videoPlayer('auto-zoom', playerOption);
+        player4.source('video-player/girl_in_a_dress', {
+            transformation:{
+                quality: 'auto',
+            },
+            interactionAreas: {
+                enable: true,
+                template: 'portrait',
+                onClick: function (event) {
+                    event.zoom();
+                }
+            }
+        });
+    });
+  </script>
+</head>
+<body>
+<div class="container p-4 col-12 col-md-9 col-xl-6">
+  <nav class="nav mb-2">
+    <a href="./index.html">&#60;&#60; Back to examples index</a>
+  </nav>
+  <h1>Cloudinary Video Player</h1>
+  <br/>
+  <h3>Interaction Areas player config:</h3>
+  <pre>
+      <code class="language-javascript">
+           var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+           cld.videoPlayer('player', {
+              interactionAreas: {
+                  theme:{
+                    template : 'pulsing'  // 'pulsing' / 'shadowed' (the default is 'pulsing')
+                  },
+                  layout: {
+                      enable: true / false (the default is true),
+                      showAgain: true / false (the default is false)
+                  }
+              }
+          });
+      </code>
+  </pre>
+  <h3>Define Interaction Areas manually</h3>
+  <br/>
+    <div class="video-container">
+        <video id="manually"
+               width="250"
+               playsinline
+               controls
+               muted
+               class="cld-video-player">
+        </video>
+    </div>
+    <pre>
+      <code class="language-html">
+         &lt;video
+          id="player"
+          width="250"
+          controls
+          muted
+          class="cld-video-player"&gt;
+         &lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+      var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+      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 = cld.videoPlayer('player',{
+          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]);
+            }
+          }
+      });
+      </code>
+  </pre>
+  <br/>
+  <h3>Interaction Areas using predefined templates</h3>
+  <br/>
+  <div class="video-container">
+        <video id="custom-template"
+               width="250"
+               playsinline
+               controls
+               muted
+               class="cld-video-player">
+        </video>
+   </div>
+  <pre>
+      <code class="language-html">
+         &lt;video
+          id="player"
+          width="250"
+          controls
+          muted
+          class="cld-video-player"&gt;
+         &lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+      var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+      var player = cld.videoPlayer('player',{
+          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)
+            }
+          }
+        }
+      });
+      </code>
+  </pre>
+    <h3>Using your own VTT file</h3>
+    <br/>
+    <div class="video-container">
+        <video id="custom-vtt"
+               width="250"
+               playsinline
+               controls
+               muted
+               class="cld-video-player">
+        </video>
+    </div>
+    <pre>
+      <code class="language-html">
+         &lt;video
+          id="player"
+          width="250"
+          controls
+          muted
+          class="cld-video-player"&gt;
+         &lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+      var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+      var player = cld.videoPlayer('player',{
+          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]);
+                }
+            }
+        });
+      </code>
+  </pre>
+    <h3>Auto-zoom video cropping</h3>
+    <br/>
+    <div class="video-container">
+        <video id="auto-zoom"
+               width="250"
+               playsinline
+               controls
+               muted
+               class="cld-video-player">
+        </video>
+    </div>
+    <pre>
+      <code class="language-html">
+         &lt;video
+          id="player"
+          controls
+          muted
+          class="cld-video-player"&gt;
+         &lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+      var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+      var player = cld.videoPlayer('player', {
+          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();
+                }
+            }
+      });
+      </code>
+  </pre>
+</div>
+</body>
+</html>