cloudinary-video-player 1.6.2-edge.13

package/docs/scripts.js

@@ -0,0 +1,156 @@
+/* eslint no-var: "off", vars-on-top: "off", curly: "off", no-extend-native: "off" */
+
+// String.startsWith() polyfill
+if (!String.prototype.startsWith) {
+  String.prototype.startsWith = function (searchString, position) {
+    position = position || 0;
+    return this.substr(position, searchString.length) === searchString;
+  };
+}
+
+// URLSearchParams.get() polyfill
+if (!window.URLSearchParams) {
+  window.URLSearchParams = window.URLSearchParams || function (searchString) {
+    var self = this;
+    self.searchString = searchString;
+    self.get = function (name) {
+      var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
+
+      if (results === null) {
+        return null;
+      }
+
+      return decodeURI(results[1]) || 0;
+    };
+  };
+}
+
+// true on /localhost or /anything.local
+var isLocal = window.location.hostname === 'localhost' || window.location.hostname.substring(window.location.hostname.lastIndexOf('.', window.location.hostname.lastIndexOf('.')) + 1) === 'local';
+
+// true if testing in an IP page URL
+var isIpAddress = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(window.location.hostname);
+
+var cdnPrefix = function (source, ver) {
+  var external = source.startsWith('http');
+
+  if (!ver && (external || isLocal || isIpAddress)) {
+    return '';
+  }
+
+  return 'https://unpkg.com/cloudinary-video-player@' + (ver || 'edge') + '/dist';
+};
+
+// Get scripts & styles from:
+// `localhost` while developing (localhost/ip address/.local domain)
+// `unpkg.com` while demoing OR if a specific version is specified
+// These MUST be global since they are called by some examples
+var loadScript = function (source, ver) {
+  var prefix = cdnPrefix(source, ver);
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = prefix + source;
+  script.async = false;
+  document.getElementsByTagName('head')[0].appendChild(script);
+};
+
+var loadStyle = function (source, ver) {
+  var prefix = cdnPrefix(source, ver);
+  var style = document.createElement('link');
+  style.type = 'text/css';
+  style.rel = 'stylesheet';
+  style.href = prefix + source;
+  document.getElementsByTagName('head')[0].appendChild(style);
+};
+
+(function () {
+
+  // Allows testing of various build flavors (min/light) & versions (1.1.x)
+  var search = new URLSearchParams(window.location.search);
+  var ver = search.get('ver');
+  var min = search.get('min');
+  var light = search.get('light');
+
+  var versions = [
+    { label: 'Select Player Version:' },
+    { value: 'ver=latest', label: 'Stable (Latest)' },
+    { value: 'ver=latest&min=true', label: 'Stable, Minified' },
+    { value: 'ver=latest&light=true', label: 'Stable, Light' },
+    { value: 'ver=latest&min=true&light=true', label: 'Stable, Light, Minified' },
+    { value: 'ver=edge', label: 'Edge (Next Stable)' },
+    { value: 'ver=edge&min=true', label: 'Edge, Minified' },
+    { value: 'ver=edge&light=true', label: 'Edge, Light' },
+    { value: 'ver=edge&min=true&light=true', label: 'Edge, Light, Minified' }
+  ];
+
+  initPlayerExamples();
+
+  function createVersionSelector() {
+    // Create and append select list
+    var selectList = document.createElement('select');
+    selectList.id = 'version-switch';
+    selectList.style.cssText = 'appearance: none;position:fixed;bottom:20px;right:20px;background:#fff;min-width:220px;height:2em;border:1px solid #ddd;padding:0 1em;';
+    selectList.onchange = function (e) {
+      var selected = e.target.value;
+      if (selected) {
+        window.location.href = window.location.origin + window.location.pathname + '?' + selected;
+      }
+    };
+    document.body.appendChild(selectList);
+
+    // Current flavor
+    var current = 'ver=' + (ver || !isLocal && 'edge');
+    if (min) current = current + '&min=' + min;
+    if (light) current = current + '&light=' + light;
+
+    // Create and append the options
+    versions.forEach(function (version){
+      var option = document.createElement('option');
+      option.text = version.label;
+
+      if (version.value) {
+        option.value = version.value;
+        // Find if this is the flavor currently in use
+        if (option.value === current) {
+          option.selected = true;
+          option.text = 'Testing: ' + option.text;
+        }
+      } else {
+        // 'Select Player Version:'
+        option.disabled = true;
+        option.selected = true;
+      }
+
+      selectList.appendChild(option);
+    });
+  }
+
+  function updatePageAnchors() {
+    // Maintain the 'ver' query param on internal links.
+    document.querySelectorAll('a').forEach(function (a) {
+      if (a.hostname === location.hostname) {
+        var url = a.href + '?';
+        if (ver) url = url + 'ver=' + ver + '&';
+        if (min) url = url + 'min=' + min + '&';
+        if (light) url = url + 'light=' + light;
+        a.setAttribute('href', url);
+      }
+    });
+  }
+
+  function initPlayerExamples() {
+    loadScript('https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js');
+    loadStyle('/cld-video-player' + (light ? '.light' : '') + (min ? '.min' : '') + '.css', ver);
+    loadScript('/cld-video-player' + (light ? '.light' : '') + (min ? '.min' : '') + '.js', ver);
+
+    window.addEventListener('load', function () {
+
+      createVersionSelector();
+
+      if (ver || min || light) {
+        updatePageAnchors();
+      }
+    }, false);
+  }
+
+}());

package/docs/seek-thumbs.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <link href="https://cloudinary-res.cloudinary.com/image/asset/favicon-32x32-2991a47c2caa80211bf2dbf3f29317c8.png" rel="icon" sizes="32x32" 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', {
+        seekThumbnails: true
+      });
+
+    }, 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">Seek Thumbnails</h3>
+
+    <video
+      id="player"
+      playsinline
+      controls
+      muted
+      autoplay
+      class="cld-video-player cld-fluid cld-video-player-skin-light"
+      data-cld-public-id="elephants">
+    </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>
+    <pre>
+      <code class="language-html">
+        &lt;video
+          id="player"
+          playsinline
+          controls
+          muted
+          autoplay
+          class="cld-video-player cld-fluid cld-video-player-skin-light"
+          data-cld-public-id="elephants"&gt;
+        &lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+        var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
+
+        // Initialize player
+        var player = cld.videoPlayer('player', {
+          seekThumbnails: true
+        });
+
+      </code>
+    </pre>
+  </div>
+
+</body>
+</html>

package/docs/shoppable.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <meta name="viewport" content="width=device-width">
+  <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' });
+
+      player = cld.videoPlayer('player');
+
+      var source = {
+        info: {
+          title: 'Shoppable Video',
+          description: 'Browse products shown in the video.',
+        },
+        shoppable: {
+          startState: 'openOnPlay',
+          autoClose: 2,
+          showPostPlayOverlay: true,
+          bannerMsg: 'START SHOPPING',
+          width: '20%',
+          toggleIcon: "https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_icon_for_white_bg.png",
+          transformation: {
+            crop: "fill",
+            aspect_ratio: "1"
+          },
+          products: [
+            {
+              productId: 1,
+              productName: "Bell Pepper",
+              startTime: 0,
+              endTime: 2,
+              title: 'Overlay on-hover & seek on-click',
+              publicId: "docs/pepper",
+              hotspots: [
+                {
+                  time: "00:02",
+                  x: "80%",
+                  y: "30%",
+                  tooltipPosition: "bottom",
+                  clickUrl: "https://www.example.net/product-one"
+                }
+              ],
+              onHover: {
+                action: "overlay",
+                args: "Click to see this product in the video"
+              },
+              onClick: {
+                action: "seek",
+                pause: 5,
+                args: {
+                  time: "00:02"
+                }
+              }
+            },
+            {
+              productId: 2,
+              productName: "Tomato",
+              startTime: 2,
+              endTime: 5,
+              publicId: "docs/tomatoes",
+              onHover: {
+                action: "switch",
+                args: {
+                  publicId: "docs/tomatoes_alternate"
+                }
+              },
+              onClick: {
+                action: "goto",
+                pause: true,
+                args: {
+                  url: "https://www.example.net/product-two"
+                }
+              }
+            },
+            {
+              productId: 3,
+              productName: "Banana",
+              startTime: 7,
+              endTime: 11,
+              publicId:
+                "docs/banana",
+              onHover: {
+                action: "switch",
+                args: {
+                  publicId: "docs/banana_alternate"
+                }
+              },
+              onClick: {
+                action: "goto",
+                pause: true,
+                args: {
+                  url:
+                    "https://www.example.net/product-three"
+                }
+              }
+            },
+            {
+              productName: 'Product 4',
+              productId: 4,
+              publicId: 'balloons'
+            },
+            {
+              productName: 'Product 5',
+              productId: 5,
+              publicId: 'friends'
+            }
+          ]
+        }
+      };
+
+      player.source('snow_horses', source);
+
+      // Player Events
+      player.on('productHover', function (e, data) {
+        console.log('Product Hover: ' + JSON.stringify(data));
+      });
+      player.on('productClick', function (e, data) {
+        console.log('Product Click: ' + JSON.stringify(data));
+      });
+      player.on('productBarMin', function (e) {
+        console.log('Product bar close');
+      });
+      player.on('productBarMax', function (e) {
+        console.log('Product bar open');
+      });
+      player.on('replay', function (e) {
+        console.log('replay');
+      });
+      player.on('productHoverPost', function (e, data) {
+        console.log('Product Hover Post Playback: ' + JSON.stringify(data));
+      });
+      player.on('productClickPost', function (e, data) {
+        console.log('Product Click Post Playback: ' + JSON.stringify(data));
+      });
+
+    }, 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">Shoppable Videos</h3>
+
+    <video id="player" playsinline controls muted
+      class="cld-video-player cld-fluid cld-video-player-skin-light"></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>
+    <pre>
+      <code class="language-html">
+        &lt;video
+          id="player"
+          playsinline
+          controls
+          muted
+          autoplay
+          class="cld-video-player cld-fluid cld-video-player-skin-light"
+        &gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+        var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
+
+        // Initialize player
+        var player = cld.videoPlayer('player');
+
+        // Define source
+        var source = {
+          info: {
+            title: 'Shoppable Video',
+            description: 'Browse products shown in the video.',
+          },
+          shoppable: {
+            startState: 'openOnPlay',
+            autoClose: 2,
+            showPostPlayOverlay: true,
+            bannerMsg: 'START SHOPPING',
+            width: '20%',
+            toggleIcon: "https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_icon_for_white_bg.png",
+            transformation: {
+              crop: "fill",
+              aspect_ratio: "1"
+            },
+            products: [
+              {
+                productId: 1,
+                productName: "Bell Pepper",
+                startTime: 0,
+                endTime: 2,
+                title: 'Overlay on-hover & seek on-click',
+                publicId: "docs/pepper",
+                hotspots: [
+                  {
+                    time: "00:02",
+                    x: "50%",
+                    y: "50%",
+                    tooltipPosition: "left",
+                    clickUrl: "https://www.example.net/product-one"
+                  }
+                ],
+                onHover: {
+                  action: "overlay",
+                  args: "Click to see this product in the video"
+                },
+                onClick: {
+                  action: "seek",
+                  pause: 5,
+                  args: {
+                    time: "00:01"
+                  }
+                }
+              },
+              {
+                productId: 2,
+                productName: "Tomato",
+                startTime: 2,
+                endTime: 5,
+                publicId: "docs/tomatoes",
+                onHover: {
+                  action: "switch",
+                  args: {
+                    publicId: "docs/tomatoes_alternate"
+                  }
+                },
+                onClick: {
+                  action: "goto",
+                  pause: true,
+                  args: {
+                    url: "https://www.example.net/product-two"
+                  }
+                }
+              },
+              {
+                productId: 3,
+                productName: "Banana",
+                startTime: 7,
+                endTime: 11,
+                publicId:
+                  "docs/banana",
+                onHover: {
+                  action: "switch",
+                  args: {
+                    publicId: "docs/banana_alternate"
+                  }
+                },
+                onClick: {
+                  action: "goto",
+                  pause: true,
+                  args: {
+                    url:
+                      "https://www.example.net/product-three"
+                  }
+                }
+              },
+              {
+                productName: 'Product 4',
+                productId: 4,
+                publicId: 'balloons'
+              },
+              {
+                productName: 'Product 5',
+                productId: 5,
+                publicId: 'friends'
+              }
+            ]
+          }
+        };
+
+        // Play source
+        player.source('snow_horses', source);
+
+        // Player Events
+        player.on('productHover', function (e, data) {
+          console.log('Product Hover: ' + JSON.stringify(data));
+        });
+        player.on('productClick', function (e, data) {
+          console.log('Product Click: ' + JSON.stringify(data));
+        });
+        player.on('productBarMin', function (e) {
+          console.log('Product bar close');
+        });
+        player.on('productBarMax', function (e) {
+          console.log('Product bar open');
+        });
+        player.on('replay', function (e) {
+          console.log('replay');
+        });
+        player.on('productHoverPost', function (e, data) {
+          console.log('Product Hover Post Playback: ' + JSON.stringify(data));
+        });
+        player.on('productClickPost', function (e, data) {
+          console.log('Product Click Post Playback: ' + JSON.stringify(data));
+        });
+
+      </code>
+    </pre>
+  </div>
+
+</body>
+
+</html>