cloudinary-video-player/docs/index.html at 57b7bf8dfea26736387d3da137fdaa8326adbcb0 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cloudinary Video Player</title>
  <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">

  <!-- Bootstrap -->
  <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">

  <!--
    We're loading scripts & style dynamically for development/testing.
    Real-world usage would look like this:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
  -->

  <script type="text/javascript" src="scripts.js"></script>

  <script type="text/javascript">
    window.addEventListener('load', function(){

      player = cloudinary.videoPlayer('player', { cloudName: 'demo' });

    }, false);
  </script>

</head>
<body>

  <div class="container p-4 col-12 col-md-9 col-xl-6">
    <h1 class="mb-4">Cloudinary Video Player</h1>

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

    <p class="mt-4">
      <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation @ cloudinary.com/documentation</a>
    </p>

    <h3 class="mt-4">Some 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="./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="./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="./es-imports.html">ES Module Imports</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-ios.html">Force HLS Subtitles</a></li>
      <li><a href="./interaction-area.html">Interaction Area</a></li>
      <li><a href="./live-streaming.html">Live Streaming</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-captions.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="./seek-thumbs.html">Seek Thumbnails</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="./visual-search.html">Visual Search</a></li>
      <li><a href="./360.html">VR/360 Videos</a></li>
      <hr>
      <li><a href="./embedded-iframe.html">Embedded (iframe) player</a></li>
      <li><a href="https://cld-vp-esm-pages.netlify.app/">ESM Imports</a></li>
    </ul>

  </div>
</body>
</html>