cloudinary-video-player/docs/es-modules/components.html at ad075d959207a8313a81004467f17cc796db7f4c · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!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,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
      rel="icon"
      type="image/png"
    />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <style type="text/css">
      .vjs-control.vjs-playlist-control:before {
        font-family: FontAwesome;
        font-size: 1.5em;
        line-height: 2;
      }

      .vjs-playlist-control.vjs-playlist-next-control:before {
        content: '\f050';
      }
      .vjs-playlist-control.vjs-playlist-previous-control:before {
        content: '\f049';
      }
    </style>
  </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>
      <h2>Custom Components</h2>

      <video
        id="player"
        class="cld-video-player cld-fluid"
        crossorigin="anonymous"
        autoplay
        controls
        muted
        playsinline
      ></video>

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

    <script type="module">
      import { videoPlayer, videojs } from 'cloudinary-video-player';
      import 'cloudinary-video-player/cld-video-player.min.css';

      // Get the ClickableComponent base class from Video.js
      const ClickableComponent = videojs.getComponent('ClickableComponent');

      // Create a common class for playlist buttons
      class PlaylistButton extends ClickableComponent {
        constructor(player, options) {
          super(player, options);

          const type = options.type;
          if (!type && type !== 'previous' && type !== 'next') {
            throw new Error("Playlist must be either 'previous' or 'next'");
          }
        }

        // The `createEl` function of a component creates its DOM element.
        createEl() {
          const type = this.options_.type;

          const typeCssClass = 'vjs-playlist-' + type + '-control';

          return videojs.createEl('button', {
            // Prefixing classes of elements within a player with "vjs-"
            // is a convention used in Video.js.
            className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
          });
        }
      }

      // Create the NextButton component
      class NextButton extends PlaylistButton {
        constructor(player, options) {
          super(player, Object.assign({}, { type: 'next' }, options));
        }

        handleClick() {
          PlaylistButton.prototype.handleClick.call(this);

          // Since the component has a VideoJS Player object, we use the internal
          // Cloudinary plugin to reach to the playlist object.
          this.player().cloudinary.playlist().playNext();
        }
      }

      // Create the PreviousButton component
      class PreviousButton extends PlaylistButton {
        constructor(player, options) {
          super(player, Object.assign({}, { type: 'previous' }, options));
        }

        handleClick() {
          PlaylistButton.prototype.handleClick.call(this);
          this.player().cloudinary.playlist().playPrevious();
        }
      }

      // Register the component with Video.js, so it can be used in players.
      videojs.registerComponent('NextButton', NextButton);
      videojs.registerComponent('PreviousButton', PreviousButton);

      // Cloudinary Video Player related code
      // ====================================

      // Initialize player with only the controlBar's 'playToggle' and our
      // custom components set.
      const player = videoPlayer('player', {
        cloudName: 'demo',
        seekThumbnails: false,
        videojs: {
          controlBar: { children: ['PreviousButton', 'playToggle', 'NextButton'] }
        }
      });

      player.playlist([{ publicId: 'elephants' }, 'sea_turtle'], { autoAdvance: 0, repeat: true });
    </script>

    <!-- 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"
    />
  </body>
</html>