Video player

Introduction and setup

Getting started

The Cloudinary Video Player is a JavaScript-based HTML5 video player bundled with many valuable customization and integration capabilities, and is analytics-ready. The player is fully integrated with Cloudinary's video delivery and manipulation solution and it takes just a few lines of code to embed a player into your web page.

For example, this video tag and short bit of javascript:

<div style="max-width: 550px">
<video id="doc-player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var demoplayer = cld.videoPlayer('doc-player').width(550);
demoplayer.playlistByTag('video_race', {
  sourceParams: { overlay: "cloudinary_icon", opacity: 80, effect:  "brightness:200", width: 100, gravity: "north_east", x: 20, y: 10 },
  autoAdvance: 0, repeat: true, presentUpcoming: 3
})

Creates a responsively resizing video player with an automatically generated playlist (based on a specified tag) that displays titles, subtitles, a semi-transparent logo overlay transformation, and next-up preview:

See also:

Video player features

  • Broad device support: The webview player is designed for both desktop and mobile web browsers on a wide range of devices.

  • Player controls: Built-in support of all standard player controls: play, pause, mute/unmute, volume control, loop, maximize/exit maximize, with the option for full customization.

  • Video manipulations: Apply Cloudinary video transformations at the player level that will apply to all videos delivered in that player. Apply additional or override video transformations at the per-video level.

  • Multiple players: Include multiple players on the same page, each with different configuration settings, or with different sources and the same configuration.

  • Formats: Supports popular video formats, such as .mp4, .ogv, .webm, .mov. You can specify multiple formats and the player automatically selects the best format for the browser where it's playing.

  • Adaptive bitrate streaming: Full support for HLS and MPEG-DASH including automatic generation of all required streaming representations and supporting files.

  • Customization:

    • Simple parameters to adjust skin themes, display of titles and subtitles and other basic player preferences
    • Events that enable you to trigger operations based on both passive and interactive actions that occur in your player.
    • Access to the underlying VideoJS API for low-level control or customization of any element of the player.
  • Playlists: Pass a list of videos or automatically include all videos that have a specified tag. Display a Next up thumbnail towards the end of each video in the list.

  • Recommendations: Display recommended videos when a video ends.

  • Analytics: Monitor how many users are viewing your video and when, down to the level of any events you choose (start, pause, watched duration percentages, and more) and then pass the captured data to your Google Analytics account or other analytics trackers.

Installation and setup

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

  • Full package: Includes all functionality described in this document, except MPEG-DASH support.
  • Light package: Excludes the following optional functionality: HLS support.

Note
You can add MPEG-DASH support separately to either package.

Full Light
Non-minified cld-video-player.js
cld-video-player.css
cld-video-player.light.js
cld-video-player.light.ss
Minified cld-video-player.min.js
cld-video-player.min.css
cld-video-player.light.min.js
cld-video-player.light.min.css

To include a video player on an HTML page, you can either reference the relevant video player package files directly from Unpkg CDN or you can install the complete video player package locally and then reference the relevant local files.

Option 1: Reference the relevant video player and JavaScript SDK files directly from 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>

Option 2: Install the video player and javascript packages and then include the required CSS and Javascript

  1. Install the cloudinary-video-player as well as the Cloudinary JavaScript SDK package and lodash if these are not already installed:

    npm install lodash cloudinary-core cloudinary-video-player
  2. Reference the relevant local CSS and JavaScript files:

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

For more information on the Cloudinary JavaScript package, see JavaScript integration.

Enabling MPEG-DASH support for your video player

If you plan to deliver videos in your video player using MPEG-DASH files, include the following files in addition to the files described above:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.2/videojs-dash.min.js" 
    type="text/javascript">  
</script>

Afterwards, you can specify dash as the the source type for your video source, as described in HLS and MPEG-DASH Adaptiev Streaming.

Video Player samples

You can view sample HTML and JavaScript code for the features described in this document in the the Cloudinary Video Player Demo and Cloudinary Video Player CodePen.