cloudinary-video-player/docs/_template.html at d99004fbe6dadb7942de767d4203bc24053ddb03 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <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">

  <!-- highlight.js -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

  <!--
    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/player.min.css">
    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/player.min.js"></script>

  -->

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

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

      const player = cloudinary.videoPlayer('player', {
        cloudName: 'demo',
        publicId: 'elephants',
        info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
      });

    }, false);
  </script>

</head>
<body>
  <div class="container p-4 col-12 col-md-9 col-xl-6">
    <nav class="nav mb-2">
      <a href="./index.html">&#60;&#60; Back to examples index</a>
    </nav>
    <h1>Cloudinary Video Player</h1>
    <h3 class="mb-4">TITLE</h3>

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

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

    <h3 class="mt-4">Example Code:</h3>
    <pre>
      <code class="language-html">
        &lt;video
          id="player"
          controls
          muted
          autoplay
          class="cld-video-player"
          width="500"
        &gt;&lt;/video&gt;
      </code>
      <code class="language-javascript">

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

        // Define source
        const source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };

        // Play source
        player.source(source);
      </code>
    </pre>
  </div>

</body>
</html>