Cloudinary Video Player

Components

Read more about VideoJS components

Example Code:

      

      <!-- We used FontAwesome for the 'Previous' and 'Next' controlBar buttons -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <!-- Add required CSS for displaying the fonts -->
      <style type="text/css">
        .vjs-control.vjs-playlist-control:before {
          font-family: FontAwesome;
          font-size: 1.5em;
          line-height: 2.0;
        }

        .vjs-playlist-control.vjs-playlist-next-control:before {
          content: "\f050";
        }
        .vjs-playlist-control.vjs-playlist-previous-control:before {
          content: "\f049";
        }
      </style>
      
      
      <video
        id="player"
        controls
        muted
        autoplay
        class="cld-video-player"
        width="500">
       </video>

      

      

      // Code for creating the VideoJS components
      // ===============================================

      // Get the ClickableComponent base class from Video.js
      let vjs =  videojs.default ? videojs.default : videojs;
      var ClickableComponent = vjs.getComponent('ClickableComponent');

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

          var 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;

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

          return vjs.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.
      vjs.registerComponent('NextButton', NextButton);
      vjs.registerComponent('PreviousButton', PreviousButton);

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

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

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