Last updated: Nov-29-2023
This guide describes cloudinary-video-player version 1.10.2.
As of version 1.10.2, the default sourceTypes uses automatic format selection to choose the most optimal file type and codec based on the user's device and browser. When upgrading and using the default, you may get additional derived videos for any file types and codecs not included in the previous default set.
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.
The Cloudinary video player is a feature-rich HTML5-based video player. This section summarizes its main functionality.
- 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 transformations: 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 and codecs such as
h265. By default automatic format selection is applied, or you can manually specify multiple source types.
- Adaptive bitrate streaming: Full support for HLS and MPEG-DASH including automatic generation of all required streaming representations and supporting files.
- 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.
- Define chapters for your videos and display chapter markers on the seek bar.
- A smaller floating player that appears when the user scrolls beyond a playing video.
- Seek thumbnails that show when using the seek bar to allow previewing of upcoming content.
- AI-based highlights graph to show a graph above the seek bar highlighting the most interesting parts of the 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: 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.
- The Analytics page of the Cloudinary Console offers additional insights into the videos you deliver using the Video Player. Explore metrics on total video loads, most-watched videos, and key demographics like top devices, browsers, and countries.
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. Adaptive bitrate streaming using DASH is lazily loaded if DASH is specified as a source type.
- Light package: Excludes the following optional functionality: Adaptive bitrate streaming (HLS and DASH), Video ads, Shoppable Video (Alpha)
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 directly from Unpkg CDN
Option 2: Install the video player and import as a module
Import the video player as a module and import the CSS file:
To create a video player instance, invoke the
cloudinary.videoPlayer method. Provide either the HTML element of your video player or its ID, along with the cloud name associated with your product environment. You can also include any additional options. For example:
Once the video player is instantiated, use the source method to load a video. Provide either the public ID or the raw URL of the video you want to load. For example:
- Your cloud name is required, even if you are using raw URLs, in order to support video analytics data.
- Previous versions of the Video Player (before version 1.9.0) also required the
cloudinary.Cloudinary.new). Existing customers should note that although the current version of the Video Player still supports this old syntax and no changes are needed to your existing Video Player code, the removal of the dependency on the
Use the Video Player Studio to create and customize a video player instance and easily copy and paste the required code into your website or application. The studio includes features that enable you to:
- Select your Video source and related configuration.
- Apply Customization to the look and feel of your player.
- Choose from a set of Advanced features and video delivery functionality.
You can experiment with a variety of Video Player methods and properties in the Cloudinary Video Player CodePen.