cloudinary-video-player

Cloudinary Video Player is a JavaScript-based HTML video player bundled with many valuable customization and integration capabilities, and is monetization and analytics-ready. The player is fully responsive for use in any device or screen size, and is integrated with Cloudinary's video delivery and manipulation solution.

This README includes basic information for installation and getting started. View the documentation for comprehensive guidance on integration and all the available features.

Installation

NPM

1. Install using:

   npm install cloudinary-video-player

2. Import the package:

   import cloudinary from 'cloudinary-video-player';
   import 'cloudinary-video-player/cld-video-player.min.css';
   // import required plugins like that:
   // import 'cloudinary-video-player/chapters';
   // import 'cloudinary-video-player/playlist';

• Note - import /all to get all available plugins in a single import:

  import cloudinary from 'cloudinary-video-player/all';
  import 'cloudinary-video-player/cld-video-player.min.css';

CDN

Cloudinary Video Player can also be included directly from the jsDelivr CDN, optional plugins will be lazy-loaded on demand:

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

<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>

Getting started

Create a video tag containing cld-video-player class and a supported skin class:

<video
  id="player"
  controls
  autoplay
  data-cld-public-id="dog"
  class="cld-video-player cld-fluid">
</video>

Instantiate a new cloudinary Video Player:

cloudinary.videoPlayer('player', {
   cloudName: 'demo',
   publicId: 'cld-sample-video'
});

Documentation

• Documentation
• API Reference
• Demos
• Code Examples
• Video Player Studio

Development

In order to run this project locally:

1. Clone this repository
2. npm install
3. npm start