From 26332ba06cb0cde418e79878d7023c0b5a8c9e3c Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Sun, 10 Mar 2024 11:41:41 +0200 Subject: [PATCH] chore: example pages (#575) * chore: example pages * chore: example pages * chore: example pages --- docs/autoplay-fallback.html | 136 ------------------ .../cloudinary-analytics-multiple-videos.html | 118 --------------- docs/cloudinary-analytics.html | 55 ++++--- ...codec-fallback.html => codec-formats.html} | 106 +++++++------- docs/colors.html | 11 +- docs/es-imports.html | 31 +--- docs/index.html | 51 +++---- docs/live-customer.html | 132 ----------------- docs/multiple-players.html | 2 + docs/poster.html | 34 ++++- docs/profiles.html | 9 +- 11 files changed, 171 insertions(+), 514 deletions(-) delete mode 100644 docs/autoplay-fallback.html delete mode 100644 docs/cloudinary-analytics-multiple-videos.html rename docs/{codec-fallback.html => codec-formats.html} (59%) delete mode 100644 docs/live-customer.html diff --git a/docs/autoplay-fallback.html b/docs/autoplay-fallback.html deleted file mode 100644 index 0ae89504..00000000 --- a/docs/autoplay-fallback.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - Cloudinary Video Player - - - - - - - - - - - - - - - - - - - - -
- -

Cloudinary Video Player

- - - - -

Autoplay inline

- -
-
- - - - - -

No autoplay

- -
-
- - - -

Call play api

- -

- Full documentation -

- -

Example Code:

- 
-      
-        <video
-          id="player"
-          controls
-          muted
-          autoplay
-          class="cld-video-player"
-          width="500">
-        </video>
-      
-      
-
-        // Initialize player
-        var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });
-
-        // Define source
-        var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
-
-        // Play source
-        player.source(source);
-      
-
-
- - - diff --git a/docs/cloudinary-analytics-multiple-videos.html b/docs/cloudinary-analytics-multiple-videos.html deleted file mode 100644 index 8186e416..00000000 --- a/docs/cloudinary-analytics-multiple-videos.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - - Cloudinary Video Player - - - - - - - - - - - - - - - - - -
- - -

Cloudinary Video Player

-

Cloudinary analytics with multiple videos

- - - -


- - - -

Example Code:

- - 
-      
-
-        <video
-          id="player"
-          controls
-          muted
-          autoplay
-          class="cld-video-player"
-          width="500">
-        </video>
-
-      
-      
-        <script type="text/javascript">
-
-          // Initialize player
-          const player = cloudinary.videoPlayer('player', {
-            cloud_name: 'demo',
-            secure: true,
-            cloudinaryAnalytics: true
-          });
-
-          player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4');
-
-          const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
-            cloud_name: 'demo',
-            secure: true,
-            cloudinaryAnalytics: true
-          });
-
-          adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
-
-        </script>
-      
-
-
- - - diff --git a/docs/cloudinary-analytics.html b/docs/cloudinary-analytics.html index f464cd20..a0238ed8 100644 --- a/docs/cloudinary-analytics.html +++ b/docs/cloudinary-analytics.html @@ -24,15 +24,21 @@ @@ -51,13 +57,22 @@

Cloudinary analytics

playsinline controls muted + autoplay class="cld-video-player" - width="500"> - + width="500" + > -

- Analytics documentation -

+


+ +

Example Code:

@@ -68,24 +83,30 @@

Example Code:

id="player" controls muted + autoplay class="cld-video-player" width="500"> </video> - <!-- Actual code --> <script type="text/javascript"> - // 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'); </script> diff --git a/docs/codec-fallback.html b/docs/codec-formats.html similarity index 59% rename from docs/codec-fallback.html rename to docs/codec-formats.html index 26367a47..1a0c44f4 100644 --- a/docs/codec-fallback.html +++ b/docs/codec-formats.html @@ -31,42 +31,41 @@ var uap = new UAParser(navigator.userAgent); + // f_auto (default) player player = cloudinary.videoPlayer('player', { - cloud_name: 'demo', + cloudName: 'demo', publicId: 'product-gallery-tutorial_hlk0na', - info: { title: 'Video too big cached' }, + info: { title: 'f_auto' }, }); player.videojs.on('playing', function() { - document.getElementById('cached-info').innerHTML = uap.getBrowser().name + ' is playing ' + player.videojs.currentSrc(); + document.getElementById('info').innerHTML = uap.getBrowser().name + ' is playing ' + player.videojs.currentSrc(); }); - playerWebm = cloudinary.videoPlayer('player-webm', { - cloud_name: 'demo', + // mp4/av1 player + playerAv1 = cloudinary.videoPlayer('player-av1', { + cloudName: 'demo', publicId: 'product-gallery-tutorial_hlk0na', - info: { title: 'Video too big cached' }, - sourceTypes: ['webm'] + info: { title: 'mp4/av1' }, + sourceTypes: ['mp4/av1'] }); - playerWebm.videojs.on('playing', function() { - document.getElementById('cached-info-webm').innerHTML = uap.getBrowser().name + ' is playing ' + playerWebm.videojs.currentSrc(); + playerAv1.videojs.on('playing', function() { + document.getElementById('info-mp4-av1').innerHTML = uap.getBrowser().name + ' is playing ' + playerAv1.videojs.currentSrc(); }); - playerTooBig = cloudinary.videoPlayer('player-too-big', { - cloud_name: 'demo', - publicId: 'Image_Performance', - info: { title: 'Video too big to transcode' }, + // webm/vp9 player + playerVp9 = cloudinary.videoPlayer('player-vp9', { + cloudName: 'demo', + publicId: 'product-gallery-tutorial_hlk0na', + info: { title: 'webm/vp9' }, + sourceTypes: ['webm/vp9'] }); - playerSmall = cloudinary.videoPlayer('player-small', { - cloud_name: 'demo', - publicId: 'what_is_cloudinary_sd', - info: { title: 'Small video' }, + playerVp9.videojs.on('playing', function() { + document.getElementById('info-vp9').innerHTML = uap.getBrowser().name + ' is playing ' + playerVp9.videojs.currentSrc(); }); - playerSmall.videojs.on('playing', function() { - document.getElementById('small-info').innerHTML = uap.getBrowser().name + ' is playing ' + playerSmall.videojs.currentSrc(); - }); }, false); @@ -78,7 +77,10 @@ << Back to examples index

Cloudinary Video Player

-

Too big cached mp4

+ +

Codecs & Formats

+ +

f_auto

- -

Too big cached webm

+ +

+ +

mp4/av1

- -

Too big error

-
- - -
+ width="500" + > -

Small video can transcode

+

+

webm/vp9

- +

Full documentation @@ -148,14 +139,29 @@

Example Code:

- // Initialize player - var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' }); - - // Define source - var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } }; + // f_auto (default) player + player = cloudinary.videoPlayer('player', { + cloudName: 'demo', + publicId: 'product-gallery-tutorial_hlk0na', + info: { title: 'f_auto' }, + }); + + // mp4/av1 player + playerAv1 = cloudinary.videoPlayer('player-av1', { + cloudName: 'demo', + publicId: 'product-gallery-tutorial_hlk0na', + info: { title: 'mp4/av1' }, + sourceTypes: ['mp4/av1'] + }); + + // webm/vp9 player + playerVp9 = cloudinary.videoPlayer('player-vp9', { + cloudName: 'demo', + publicId: 'Image_Performance', + info: { title: 'webm/vp9' }, + sourceTypes: ['webm/vp9'] + }); - // Play source - player.source(source); diff --git a/docs/colors.html b/docs/colors.html index c235b6b5..5b6a1fe9 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -55,9 +55,9 @@

Player 1

Player 2

@@ -76,9 +76,8 @@

Player 3

diff --git a/docs/es-imports.html b/docs/es-imports.html index 4366425d..39406087 100644 --- a/docs/es-imports.html +++ b/docs/es-imports.html @@ -26,7 +26,7 @@ -
+
@@ -37,34 +37,17 @@

Import as ES module

Note: Player version is managed in the sandbox dependencies panel.

- +

+ See the Pen + VP ESM by Tsachi Shlidor (@tsi) + on CodePen. +

+

Full documentation

-

Example Code:

- 
-      
-
-        // Import player and styles
-        import { videoPlayer } from "cloudinary-video-player";
-        import "cloudinary-video-player/cld-video-player.min.css";
-
-        // Initialize player
-        var player = videoPlayer('player', { cloud_name: 'demo' });
-
-        // Define source
-        var source = { publicId: 'elephants' } };
-
-        // Play source
-        player.source(source);
-      
-
diff --git a/docs/index.html b/docs/index.html index 7c48da36..873f410e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,6 +2,7 @@ + Cloudinary Video Player @@ -46,39 +47,39 @@

Cloudinary Video Player

Some code examples:

diff --git a/docs/live-customer.html b/docs/live-customer.html deleted file mode 100644 index 6af8fa44..00000000 --- a/docs/live-customer.html +++ /dev/null @@ -1,132 +0,0 @@ - - - - - Cloudinary Video Player - - - - - - - - - - - - - - - - - - - -
- -

Cloudinary Video Player

-

Demo player

- - -
-
- -

herowomen player

- - -
-
-

hero men player

- - -

- Full documentation -

-
- - - diff --git a/docs/multiple-players.html b/docs/multiple-players.html index 17dd439e..6280ba4e 100644 --- a/docs/multiple-players.html +++ b/docs/multiple-players.html @@ -46,6 +46,8 @@

Cloudinary Video Player

Multiple Players

+

Using the videoPlayers method you can initialize multiple players at once.

+

Player 1

diff --git a/docs/profiles.html b/docs/profiles.html index c3b531ca..22cc5d2c 100644 --- a/docs/profiles.html +++ b/docs/profiles.html @@ -60,7 +60,7 @@
Player with default profile


-
Player with custom profile
+
Player with custom (blur) profile