Video Player

The Cloudinary Video Player is a JavaScript-based HTML5 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.

Important
Cloudinary supports only the documented configuration and the supplied files with the video player. Any direct changes to the player code and its elements (for example, CSS and JS files) might break its functionality, and will not be supported.

This guide describes cloudinary-video-player version 1.4.3.

Recently Released

  • MPEG-DASH support now included in standard package.
  • Shoppable Video functionality (Alpha) now available.
  • Reduced file size for light package (96 KB).
  • Specify preferred codecs for HLS and DASH alongside source types.
  • New default source types and codecs: WEBM/VP9, MP4/H265, MP4
     Note: If you upgrade to versions higher than v1.3.3 and have not explicitly set source types for your video sources, the videos may be re-encoded using the new defaults when first requested.)
  • Audio only source type for playing audio only formats.

See also:

Live example

Before you embed a Cloudinary video player in your own website or mobile app, take a look at some sample video player code and the video player that results from it.

Alternatively, design and customize your video player with Cloudinary Video Player Studio.

For this simple example, a video tag and short bit of javascript creates a responsively resizing video player that plays a single video. The video is muted when loaded and includes basic controls.

Copy to clipboard
<div style="max-width: px">
<video id="doc-player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>
Copy to clipboard
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var demoplayer = cld.videoPlayer('doc-player').width(600);
demoplayer.source('race_road_car')

Video player features

The Cloudinary video player is a feature-rich HTML5-based video player. This section summarizes its main functionality.

video player features callout

  • Responsive device support: The webview player is designed for both desktop and mobile web browsers on a wide range of devices. The look and feel of the player adjusts responsively to the display size.
  • Player controls: Built-in support for player controls: play, pause, mute/unmute, volume control, loop, jump, 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, color schemes, fonts, display of titles and subtitles and other basic player preferences.
    • Easy addition of text tracks to show captions and subtitles for your videos.
    • A smaller floating player that appears when the user scrolls beyond a playing video.
    • 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 scrollable playlist widget to the right or below your player and/or pop-up a Next up thumbnail a few seconds before the end of each video.
  • Recommendations: Display recommended videos when a video ends.
  • Monetization: The player is monetization-ready, with support for leading ad standards such as VAST, VPAID, and VMAP. You can also include ads via Google DoubleClick or AdSense. Ad options include banners and pre-rolls, mid-rolls, and post-rolls (with or without a skip option).
  • Shoppable Video (Alpha): Make your videos shoppable by displaying product images alongside your videos. This allows your users to visit your product detail pages and make a purchase.
  • 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 standard and light package variations, available in either minified or non-minified formats.

Note
You can add MPEG-DASH support separately if you're using the light package. For HLS, use the standard package.

Standard Light
Non-minified cld-video-player.js
cld-video-player.css
cld-video-player.light.js
cld-video-player.light.css
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 version of the video player and JavaScript SDK files directly from Unpkg CDN

Copy to clipboard
<link href="https://unpkg.com/cloudinary-video-player@1.4.3/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/cloudinary-core@2.10.3/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player@1.4.3/dist/cld-video-player.min.js" 
    type="text/javascript"></script>

Note
The version numbers used above are the latest tested versions at the time of publishing this page. It's recommended to test the latest available versions of the video player and JavaScript SDK, and update the version numbers in your code accordingly.

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:

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

    Copy to clipboard
    <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.

Add MPEG-DASH support

If you plan to use adaptive bitrate streaming to deliver MPEG-DASH files in your video player, you can use the standard package which includes the DASH library. Alternatively, if using the light package, include the following files:

Copy to clipboard
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/3.0.2/dash.all.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.11.0/videojs-dash.min.js" 
    type="text/javascript">  
</script>

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

Note
HLS support is automatically included in both video player packages.

Video Player samples

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

✔️ Feedback sent!