Skip to content

Commit

Permalink
Merge pull request #453 from cloudinary/ME-13973-default-f_auto
Browse files Browse the repository at this point in the history 
ME-13973-default-f_auto
  • Loading branch information
@tsi
tsi authored Oct 26, 2023
2 parents 33f3f61 + afd9521 commit 4781078
Show file tree
Hide file tree
Showing 10 changed files with 144 additions and 103 deletions.
65 changes: 35 additions & 30 deletions docs/cloudinary-analytics-multiple-videos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,20 @@
<script type="text/javascript" src="./scripts.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
const player = cloudinary.videoPlayer('player', {
const player = cloudinary.videoPlayer('player', {
cloud_name: 'demo',
secure: true,
cloudinaryAnalytics: true
cloudinaryAnalytics: true
});

player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
player.source('https://res.cloudinary.com/demo/video/upload/elephants.mp4');

const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
cloud_name: 'demo',
secure: true,
cloudinaryAnalytics: true
cloudinaryAnalytics: true
});

adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
}, false);
</script>
Expand All @@ -49,25 +50,28 @@
<a href="./index.html">&#60;&#60; Back to examples index</a>
</nav>
<h1>Cloudinary Video Player</h1>
<h3 class="mb-4">Cloudinary analytics</h3>
<h3 class="mb-4">Cloudinary analytics with multiple videos</h3>

<video
id="player"
playsinline
controls
muted
class="cld-video-player"
width="500"
id="player"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>

<br><br><br>

<video
id="adpPlayer"
playsinline
controls
muted
loop
class="cld-video-player"
width="500"
id="adpPlayer"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>

<h3 class="mt-4">Example Code:</h3>
Expand All @@ -79,30 +83,31 @@ <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
const player = cloudinary.videoPlayer('player', {
const player = cloudinary.videoPlayer('player', {
cloud_name: 'demo',
secure: true,
cloudinaryAnalytics: true
});
player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
const adpPlayer = cloudinary.videoPlayer('adpPlayer', {
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');
cloudinaryAnalytics: true
});

adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');

&lt;/script&gt;
</code>
Expand Down
1 change: 0 additions & 1 deletion docs/cloudinary-analytics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@

player = cloudinary.videoPlayer('player', {
cloud_name: 'demo',
analytics: true,
cloudinaryAnalytics: true,
});

Expand Down
6 changes: 3 additions & 3 deletions docs/colors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h3 class="text-primary">Player 1</h3>
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#f44336", "accent": "#a70b00", "text": "#fff" }'
class="cld-video-player cld-video-player-skin-light"
class="cld-video-player cld-fluid cld-video-player-skin-light"
></video>
</div>
<h3 class="text-primary">Player 2</h3>
Expand All @@ -67,7 +67,7 @@ <h3 class="text-primary">Player 2</h3>
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
class="cld-video-player cld-video-player-skin-dark"
class="cld-video-player cld-fluid cld-video-player-skin-dark"
></video>
</div>

Expand All @@ -78,7 +78,7 @@ <h3 class="text-primary">Player 3</h3>
playsinline
data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
class="cld-video-player cld-video-player-skin-light"
class="cld-video-player cld-fluid cld-video-player-skin-light"
></video>
</div>

Expand Down
41 changes: 22 additions & 19 deletions docs/raw-url.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,13 @@
window.addEventListener('load', function(){
const config = {
cloud_name: 'demo',
secure: true
secure: true,
posterOptions: { posterColor: '#000' }
};

player = cloudinary.videoPlayer('player', config);

player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4');

adpPlayer = cloudinary.videoPlayer('adpPlayer',config);

Expand Down Expand Up @@ -66,13 +67,13 @@ <h3 class="mb-4">Video with raw URL</h3>
<h3 class="mb-4">Video with raw URL adaptive</h3>

<video
id="adpPlayer"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500">
id="adpPlayer"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500">
</video>

<p class="mt-4">
Expand All @@ -92,23 +93,25 @@ <h3 class="mt-4">Example Code:</h3>
&lt;/video&gt;

&lt;video
id="adpPlayer"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500">
id="adpPlayer"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500">
&lt;/video&gt;
</code>
<code class="language-javascript">

var player = cloudinary.videoPlayer('player', { cloud_name: 'demo', secure: true });
player = cloudinary.videoPlayer('player', config);

player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4');

player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
adpPlayer = cloudinary.videoPlayer('adpPlayer',config);

var adpPlayer = cld.videoPlayer('adpPlayer');
adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');

</code>
</pre>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/assets/styles/components/title-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@

.vjs-title-bar-title {
width: 100%;
font-weight: 700;
font-weight: 600;
line-height: 1.2;
margin-bottom: 0.5em;
margin-bottom: clamp(0.2em, 1.5cqw, 0.5em);;
margin-bottom: clamp(0.2em, 1.5cqw, 0.5em);
font-size: 1.8em;
font-size: clamp(1.3em, 4cqw, 1.8em);
}
Expand Down
2 changes: 1 addition & 1 deletion src/config/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default {
loop: false,
muted: false,
posterOptions: {},
sourceTypes: ['webm/vp9', 'mp4/h265', 'mp4'],
sourceTypes: ['auto'],
contextMenu: {
content: contextMenuContent
},
Expand Down
Loading

0 comments on commit 4781078

Please sign in to comment.