Code Monkey home page Code Monkey logo

cloudinary-video-player's Introduction

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';
    // Also possible:
    // import { videoPlayer } from 'cloudinary-video-player';
    import 'cloudinary-video-player/cld-video-player.min.css';

CDN

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

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

Packages

The Cloudinary video player offers standard and light package variations, available in either minified or non-minified formats.

  • Standard package: Includes all functionality described in this video player documentation.
  • Light package: Excludes the following optional functionality: Adaptive bitrate streaming (HLS and MPEG-DASH), Video ads, Shoppable videos (alpha)
  • 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)

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'
});

Documentation

Development

In order to run this project locally:

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

cloudinary-video-player's People

Contributors

tsi avatar e1adn avatar nirmaoz avatar yaniv-li avatar jakub-roch avatar zohars avatar mikeys avatar cloudinary-jenkins avatar github-actions[bot] avatar perelman avatar dependabot[bot] avatar ehab-cl avatar snyk-bot avatar nirreuveny avatar bobochka avatar ofersarid avatar mayashavin avatar aleksandar-cloudinary avatar danm1980 avatar aminimalanimal avatar lookfirst avatar naoki-sawada avatar njb90 avatar sveta-slepner avatar efratsu avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.