Skip to content

Commit 18a1b4f

Browse files
tsitsi
authored
fix: esm examples
* fix: esm examples * fix: recommendations * chore: updates * chore: pr fixes
1 parent 23b5602 commit 18a1b4f

39 files changed

+5448
-204
lines changed

‎docs/es-imports.html‎

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Cloudinary Video Player</title>
6-
<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">
7-
8-
<!-- Bootstrap -->
9-
<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">
10-
11-
<!-- highlight.js -->
12-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13-
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14-
<script>hljs.initHighlightingOnLoad();</script>
15-
16-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</title>
6+
<link
7+
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"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
12+
<!-- Bootstrap -->
13+
<link
14+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
15+
rel="stylesheet"
16+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
17+
crossorigin="anonymous"
18+
/>
19+
20+
<!-- highlight.js -->
21+
<link
22+
rel="stylesheet"
23+
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css"
24+
/>
25+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
26+
<script>
27+
hljs.initHighlightingOnLoad();
28+
</script>
29+
30+
<!--
1731
We're loading scripts & style dynamically for development/testing.
1832
Real-world usage would look like this:
1933
@@ -22,33 +36,22 @@
2236
2337
-->
2438

25-
<script type="text/javascript" src="./scripts.js"></script>
26-
27-
</head>
28-
<body>
29-
<div class="container p-4 col-12">
30-
<nav class="nav mb-2">
31-
<a href="./index.html">&#60;&#60; Back to examples index</a>
32-
</nav>
33-
<h1>Cloudinary Video Player</h1>
34-
<h3 class="mb-4">Import as ES module</h3>
35-
36-
<p class="mt-4">
37-
Note: Player version is managed in the sandbox dependencies panel.
38-
</p>
39-
40-
<p class="codepen" data-height="600" data-default-tab="js,result" data-slug-hash="XWQmLgv" data-editable="true" data-user="tsi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
41-
<span>See the Pen <a href="https://codepen.io/tsi/pen/XWQmLgv">
42-
VP ESM</a> by Tsachi Shlidor (<a href="https://codepen.io/tsi">@tsi</a>)
43-
on <a href="https://codepen.io">CodePen</a>.</span>
44-
</p>
45-
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
46-
47-
<p class="mt-4">
48-
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
49-
</p>
50-
51-
</div>
52-
53-
</body>
39+
<script type="text/javascript" src="./scripts.js"></script>
40+
</head>
41+
<body>
42+
<div class="container p-4 col-12">
43+
<nav class="nav mb-2">
44+
<a href="./index.html">&#60;&#60; Back to examples index</a>
45+
</nav>
46+
<h1>Cloudinary Video Player</h1>
47+
<h3 class="mb-4">Import as ES module</h3>
48+
49+
<iframe
50+
src="https://stackblitz.com/edit/vitejs-vite-t4sexm?embed=1&file=main.js"
51+
frameborder="0"
52+
width="100%"
53+
height="800"
54+
></iframe>
55+
</div>
56+
</body>
5457
</html>

‎docs/es-modules/360.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</title>
6+
<link
7+
href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
</head>
14+
<body>
15+
<div class="container p-4 col-12 col-md-9 col-xl-6">
16+
<nav class="nav mb-2">
17+
<a href="/index.html">&#60;&#60; Back to examples index</a>
18+
</nav>
19+
<h1>Cloudinary Video Player</h1>
20+
<h3 class="mb-4">360 Videos</h3>
21+
22+
<p>Requires an additional npm package: <code>videojs-vr</code></p>
23+
24+
<video
25+
id="player"
26+
class="cld-video-player cld-fluid"
27+
crossorigin="anonymous"
28+
controls
29+
muted
30+
playsinline
31+
></video>
32+
33+
<p class="mt-4">
34+
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
35+
</p>
36+
</div>
37+
38+
<script type="module">
39+
40+
import { videoPlayer } from 'cloudinary-video-player';
41+
import 'https://unpkg.com/[email protected]/dist/videojs-vr.js';
42+
import 'cloudinary-video-player/cld-video-player.min.css';
43+
44+
const player = cloudinary.videoPlayer('player', {
45+
cloudName: 'demo',
46+
publicId: 'video-player/Golden-Gate-Bridge',
47+
sourceTypes: ['mp4']
48+
});
49+
50+
player.videojs.vr({ projection: '360' });
51+
52+
</script>
53+
54+
<!-- Bootstrap -->
55+
<link
56+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
57+
rel="stylesheet"
58+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
59+
crossorigin="anonymous"
60+
/>
61+
</body>
62+
</html>

‎docs/es-modules/_template.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</title>
6+
<link
7+
href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
</head>
14+
<body>
15+
<div class="container p-4 col-12 col-md-9 col-xl-6">
16+
<nav class="nav mb-2">
17+
<a href="/index.html">&#60;&#60; Back to examples index</a>
18+
</nav>
19+
<h1>Cloudinary Video Player</h1>
20+
<h3 class="mb-4">TITLE</h3>
21+
22+
<p>INFO</p>
23+
24+
<video
25+
id="player"
26+
class="cld-video-player cld-fluid"
27+
crossorigin="anonymous"
28+
controls
29+
muted
30+
playsinline
31+
></video>
32+
33+
<p class="mt-4">
34+
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
35+
>Full documentation</a
36+
>
37+
</p>
38+
</div>
39+
40+
<script type="module">
41+
import { videoPlayer } from 'cloudinary-video-player';
42+
import 'cloudinary-video-player/cld-video-player.min.css';
43+
44+
const player = cloudinary.videoPlayer('player', {
45+
cloudName: 'demo',
46+
publicId: 'video-player/Golden-Gate-Bridge'
47+
});
48+
</script>
49+
50+
<!-- Bootstrap -->
51+
<link
52+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
53+
rel="stylesheet"
54+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
55+
crossorigin="anonymous"
56+
/>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)