chore: example pages (#575)

* chore: example pages * chore: example pages * chore: example pages
cloudinary · Mar 10, 2024 · 26332ba · 26332ba
1 parent 86388f5
commit 26332ba
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 514 deletions.
diff --git a/docs/autoplay-fallback.html b/docs/autoplay-fallback.html
diff --git a/docs/cloudinary-analytics-multiple-videos.html b/docs/cloudinary-analytics-multiple-videos.html
diff --git a/docs/cloudinary-analytics.html b/docs/cloudinary-analytics.html
@@ -24,15 +24,21 @@
   <script type="text/javascript" src="./scripts.js"></script>
   <script type="text/javascript">
     window.addEventListener('load', function(){
-
-      player = cloudinary.videoPlayer('player', {
-        cloud_name: 'demo',
-        cloudinaryAnalytics: true,
+      const player = cloudinary.videoPlayer('player', {
+         cloud_name: 'demo',
+         secure: true,
+         cloudinaryAnalytics: true
       });
 
-      var source = { publicId: 'marmots', info: { title: 'marmots', subtitle: 'marmots subtitle', description: 'lorem ipsum marmots' } };
+      player.source('elephants');
+
+      const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
+         cloud_name: 'demo',
+         secure: true,
+         cloudinaryAnalytics: true
+      });
 
-      player.source(source);
+      adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
     }, false);
   </script>
 
@@ -51,13 +57,22 @@ <h3 class="mb-4">Cloudinary analytics</h3>
       playsinline
       controls
       muted
+      autoplay
       class="cld-video-player"
-      width="500">
-    </video>
+      width="500"
+    ></video>
 
-    <p class="mt-4">
-      <a href="https://cloudinary.com/documentation/video_player_events_analytics#tracking_video_player_analytics">Analytics documentation</a>
-    </p>
+    <br><br><br>
+
+    <video
+      id="adpPlayer"
+      playsinline
+      controls
+      muted
+      autoplay
+      class="cld-video-player"
+      width="500"
+    ></video>
 
     <h3 class="mt-4">Example Code:</h3>
 
@@ -68,24 +83,30 @@ <h3 class="mt-4">Example Code:</h3>
           id="player"
           controls
           muted
+          autoplay
           class="cld-video-player"
           width="500"&gt;
         &lt;/video&gt;
 
       </code>
       <code class="language-javascript">
-        &lt;!-- Actual code --&gt;
         &lt;script type="text/javascript"&gt;
 
-          // Initialize player
-          var player = cloudinary.videoPlayer('player', {
+          const player = cloudinary.videoPlayer('player', {
             cloud_name: 'demo',
-            cloudinaryAnalytics: true,
+            secure: true,
+            cloudinaryAnalytics: true
           });
 
-          var source = { publicId: 'marmots', info: { title: 'marmots', subtitle: 'marmots subtitle', description: 'lorem ipsum marmots' } };
+          player.source('elephants');
+
+          const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
+            cloud_name: 'demo',
+            secure: true,
+            cloudinaryAnalytics: true
+          });
 
-          player.source(source);
+          adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
 
         &lt;/script&gt;
       </code>