--- <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); --
--- - <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> --
- <!-- 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
Full documentation @@ -148,14 +139,29 @@
- // 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 @@ + See the Pen + VP ESM by Tsachi Shlidor (@tsi) + on CodePen. +
+ -
-
-
- // 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);
-
-
Using the videoPlayers method you can initialize multiple players at once.