Cloudinary Video Player
Clone or download
Latest commit 1477e9a Sep 4, 2018
Permalink
Failed to load latest commit information.
src
static
webpack
.agignore
.babelrc
.eslintrc.js
.gitignore
.npmignore
.tern-project
LICENSE
README.md
env.example.js
package-lock.json
package.json
yarn.lock

README.md

cloudinary-video-player

Installation

NPM

  1. Install the files using:

    npm install lodash cloudinary-core cloudinary-video-player
  2. Include the javascript file in your HTML. For Example:

    <link href="node_modules/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
    
    <script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
    <script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
    <script src="node_modules/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>

CDN

Cloudinary Video Player can also be included directly from the Unpkg CDN:

<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">

<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>

Packages

For your convenience, there are currently 4 variations for our package:

  • cld-video-player.js - Non minified version which includes all optional modules.
  • cld-video-player.min.js - Minified version which includes all optional modules.
  • cld-video-player.light.js - Non minified version which does not include any optional modules.
  • cld-video-player.light.min.js - Minified version which does not include any optional modules. (for smaller bundle size)

Optional modules

  • HLS support

Cloudinary JavaScript library

The Core Cloudinary JavaScript library provides several classes, defined under the "cloudinary" domain. The reference documentation is located at https://cloudinary.github.io/pkg-cloudinary-core

Getting started

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

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

Instantiate a new cloudinary.Cloudinary instance containing your cloudinary configuration:

var cld = cloudinary.Cloudinary.new({ cloud_name: "demo"});

Instantiate a new cloudinary Video Player:

cld.videoPlayer('example-player')

Examples

Live demo and examples can be found at CodePen project: https://codepen.io/team/Cloudinary/project/editor/XLYMQV

Development

In order to run this project locally:

  1. Install yarn
  2. Clone this repository
  3. yarn install
  4. yarn start