Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://cloudinary.com/documentation/cloudinary_video_player below:

HTML5 Video Player with HLS and Video Transformations

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 has a lightweight bundle size with tree-shaking and lazy-loading of modules for optimal performance. It's fully responsive for use in any device or screen size, and is integrated with Cloudinary's video delivery and transformation solution.

The player is fully WCAG 2.1 AA compliant, ensuring that users with visual, auditory, motor, and cognitive impairments can fully engage with your videos using assistive technologies, keyboard navigation, and other accessibility-friendly enhancements. See our dedicated accessibility page to learn more about other Video Player accessibility features.

This guide describes cloudinary-video-player version 3.0.2.

As of version 3.0.0, the video player is optimized for better performance:

• The 'light' package has been removed as its functionality is now the default behavior
• Adaptive streaming (HLS and DASH) is now lazily loaded by default, improving initial load times
• When using the player via CDN, adaptive streaming modules are lazily loaded automatically as needed
• When importing as a module:
  • For HLS only: import the adaptive-streaming module
  • For DASH: import both the adaptive-streaming and dash modules

See also:

• Video Player API Reference
• Video Transformations
• Video Player Samples

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.

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.

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.
• Player profiles: Define a variety of configuration profiles or use the system profiles created by Cloudinary. Easily update and edit your Video Player without having to change your code.
• Formats: Supports popular video formats and codecs such as mp4, webm, mov | av1, vp9, 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.
• 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.
  • 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.
• Accessibility: The player is WCAG 2.1 AA compliant, with full support for keyboard navigation, and includes features to customize its look and feel, or add subtitles and captions to further enhance the player accessibility for your users. See the accessibility page to learn more about other Video Player accessibility features.

Install the library as a module using your package manager or include the video player in your application via CDN.

1. Install the cloudinary-video-player:

2. Import the video player as a module and import the CSS file:

   To keep the package size as light as possible, the video player module includes only basic functionality. To use additional functionality, you need to import the relevant module(s) as well.

   For example:

• Adaptive streaming - adaptive-streaming (required for both HLS and DASH)
• DASH - dash (required only when using DASH)
• Colors - colors
• Chapters - chapters
• Ads - ima
• Interactive videos - interaction-areas
• Playlists - playlist
• Recommendations - recommendations-overlay
• Shoppable videos - shoppable
• SRT text tracks - srt-text-tracks (when using SRT format for text tracks)

If you intend to use the majority of the above features, you can optionally include the video player using just the all module, which includes all available modules as listed above.

For example:

The Cloudinary Video Player script should be included on all pages or views of your application where the video player is used. The player is available in either minified or non-minified formats.

The package includes all functionality described in this video player documentation. Core functionality is loaded initially, with additional features loaded lazily when they are used in your video player instance.

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 update the version numbers in your code accordingly.

A cloud hosted player uses an iframe to embed a fully functioning player with all relevant configuration and dependencies already included. To include a cloud hosted player instance on your page using an iframe, create and configure your player using the Video Player Studio or build the iframe manually.

Here is an example of how the embeddable iframe code will look:

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.
• If you are using player profiles, you must use the cloudinary.player method.
• Previous versions of the Video Player (before version 1.9.0) also required the cloudinary-core JavaScript library and used a slightly different syntax for configuring the video player (using 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 cloudinary-core JavaScript library results in smaller Video Player package sizes. As such, Cloudinary recommends updating your code moving forward.

Use the Video Player Studio to create and customize a video player instance or define a player profile 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 details about the video.
• Define your player Settings, Behavior and Appearance.
• Configure your Poster, Chapters, Captions and Subtitles and Transcripts.
• Copy the required JavaScript or Embed code to add a self-hosted or cloud-hosted player to your website or application.
• Save your configuration as a player profile.

Use the Cloudinary video live streaming API to create and manage live streams that you can then use with the Video Player.

Once you've created a live stream, you can set the video player source to the hls output URI:

Alternatively, you can take the public ID of the hls output and set the type parameter to live when defining your source, making sure to set hls as your source type, for example:

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

Below you can find code explorers showing a basic example with a Video Player component for both React and Angular.

This code is also available in GitHub.

This code is also available in GitHub.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4