cloudinary-video-player/docs/es-modules/index.html at 9912ad4d38fb57eab9092cc6830ecf0a8b44f20e · cloudinary/cloudinary-video-player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cloudinary Video Player</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      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"
      rel="icon"
      type="image/png"
    />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" media="all" />
    <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"
    />
  </head>
  <body>
    <div class="container p-4 col-12 col-md-9 col-xl-6">
      <h1 class="mb-4">Cloudinary Video Player</h1>
      <h2 class="mb-4">ES imports examples</h2>

      <video
        id="player"
        controls
        muted
        class="cld-video-player cld-video-player-skin-dark cld-fluid"
        data-cld-source='{ "publicId": "dog", "info": { "title": "Dog", "subtitle": "Short movie about a dog" } }'
      ></video>

      <script type="module">

        import { videoPlayers } from 'cloudinary-video-player';
        import 'cloudinary-video-player/cld-video-player.min.css';

        const player = videoPlayers('.cld-video-player', {
          cloudName: 'demo'
        });

      </script>

      <h3 class="mt-4">Code examples:</h3>
      <ul>
        <li><a href="./adaptive-streaming.html">Adaptive Streaming</a></li>
        <li><a href="./highlights-graph.html">AI Highlights Graph</a></li>
        <li><a href="./aspect-ratio-crop.html">Aspect Ratio & Crop</a></li>
        <li><a href="./analytics.html">Analytics</a></li>
        <li><a href="./api.html">API and Events</a></li>
        <li><a href="./audio.html">Audio Player</a></li>
        <li><a href="./autoplay-on-scroll.html">Autoplay on Scroll</a></li>
        <li><a href="./breakpoints.html">Breakpoints</a></li>
        <li><a href="./chapters.html">Chapters</a></li>
        <li><a href="./cloudinary-analytics.html">Cloudinary Analytics</a></li>
        <li><a href="./codec-formats.html">Codecs and formats</a></li>
        <li><a href="./colors.html">Colors API</a></li>
        <li><a href="./components.html">Components</a></li>
        <li><a href="./custom-cld-errors.html">Custom Errors</a></li>
        <li><a href="./debug.html">Debug mode</a></li>
        <li><a href="./ui-config.html">Display Configurations</a></li>
        <li><a href="./floating-player.html">Floating Player</a></li>
        <li><a href="./fluid.html">Fluid Layouts</a></li>
        <li><a href="./force-hls-subtitles.html">Force HLS Subtitles</a></li>
        <li><a href="./hdr.html">HDR</a></li>
        <li><a href="./interaction-area.html">Interaction Area</a></li>
        <li><a href="./multiple-players.html">Multiple Players</a></li>
        <li><a href="./playlist.html">Playlist</a></li>
        <li><a href="./playlist-by-tag.html">Playlist by Tag</a></li>
        <li><a href="./poster.html">Poster Options</a></li>
        <li><a href="./profiles.html">Profiles</a></li>
        <li><a href="./raw-url.html">Raw URL</a></li>
        <li><a href="./recommendations.html">Recommendations</a></li>
        <li><a href="./schedule.html">Schedule (weekly time slots)</a></li>
        <li><a href="./seek-thumbs.html">Seek Thumbnails</a></li>
        <li><a href="./share-plugin.html">Share &amp; Download</a></li>
        <li><a href="./shoppable.html">Shoppable Videos</a></li>
        <li><a href="./subtitles-and-captions.html">Subtitles & Captions</a></li>
        <li><a href="./transformations.html">Video Transformations</a></li>
        <li><a href="./vast-vpaid.html">VAST & VPAID Support</a></li>
        <li><a href="./video-details.html">Video Details</a></li>
        <li><a href="./visual-search.html">Visual Search</a></li>
        <li><a href="./360.html">VR/360 Videos</a></li>
        <hr>
        <li><a href="./all.html"><code>/all</code> build</a></li>
        <hr>
        <h4>Bundler Tests</h4>
        <li><a href="./entry-points.html">Entry Points (all exports)</a></li>
        <li><a href="./tree-shaking.html">Tree Shaking</a></li>
        <li><a href="./lazy-loading.html">Lazy Loading</a></li>
        <li><a href="./multiple-entry-points.html">Multiple Entry Points</a></li>
      </ul>
    </div>
  </body>
</html>