cloudinary-video-player/docs/audio.html at 6fc8ba5ad2e2a1c1fbaa83a7a44315e0f664f7b7 · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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/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(){

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

      var source = { publicId: 'dog', 'sourceTypes': ['audio'] };

      player.source(source);

      var player_t = cloudinary.videoPlayer('player-t', { cloud_name: 'demo' });

      var sourceTransformation = {
        publicId: 'dog',
        'sourceTypes': ['audio'],
        transformation: {
          start_offset: 3,
          duration: 5
        }
      };

      player_t.source(sourceTransformation);

    }, 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">Audio Player</h3>

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

    <h3 class="mb-4 mt-4">Audio Player - with transformations</h3>

    <video
      id="player-t"
      playsinline
      controls
      class="cld-video-player cld-video-player-skin-light"
      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"
          playsinline
          controls
          class="cld-video-player"
          width="500"
        &gt;&lt;/video&gt;

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

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

        // Define source
        var source = { publicId: 'dog', 'sourceTypes': ['audio'] };

        // Play source
        player.source(source);

        var player_t = cloudinary.videoPlayer('player-t', { cloud_name: 'demo' });

        // Define source with transformations
        var sourceTransformation = {
          publicId: 'dog',
          'sourceTypes': ['audio'],
          transformation: {
            start_offset: 3,
            duration: 5
          }
        };

        player_t.source(sourceTransformation);
      </code>
    </pre>
  </div>

</body>
</html>