Video content has become an important part of our digital life. Businesses rely on it for marketing and advertising, while individuals engage with it for entertainment, learning, and communication. On the web, the foundational element for video playback is the HTML <video> element, while the JavaScript Video API enables interactivity, customization, and fine-grained control over video elements, allowing developers to programmatically manage playback, customize the user interface, configure look-and-feel, and handle events.
This article explores the characteristics and techniques of these video techniques in web development, comparing their functionalities, advantages, and integration with cloud-based tools like Cloudinary.
Key takeaways:
- The HTML5 video element lets you add videos to a webpage with features like play controls and autoplay. Including multiple source formats helps make sure the video works in different browsers.
- The JavaScript Video API gives you full control over HTML5 videos, letting you play, pause, or track progress through code. It’s useful for building interactive tools like video editors or custom players that go beyond basic video features.
- Use plain HTML5 video for simple playback when default controls and basic MP4 support are enough. For custom features like dynamic video editing, streaming, or custom UIs, the JavaScript Video API offers the tools needed for a more advanced setup.
In this article:
- How the HTML5 Video Element Works
- What is the Javascript Video API?
- Why Choose Between Javascript Video API and HTML5 Video
- Integrating the Javascript Video API with Cloudinary
How the HTML5 Video Element Works
The HTML5 video tag allows you to embed a media player into your page to playback video and audio files. It includes attributes like src for the video source, controls to display playback buttons for volume control, seek, and more, and autoplay for playing a video automatically.
Here’s what a simple video element embed looks like in HTML:
<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video>
The source element is a void element that allows us to specify more than one video source – this is particularly useful if you want to embed videos with different media types to ensure compatibility across different browsers.
What is the Javascript Video API?
The JavaScript Video API refers to the programmatic HTMLMediaElement interface that gives developers advanced control over video playback, streaming, analytics, transformations, and delivery. It allows access to and control of the HTML5 <video> element. When you include a <video> tag in your HTML, the browser creates a HTMLVideoElement object, which inherits from the HTMLMediaElement interface (this encapsulates basic media-related capabilities that are common to audio and video).
Some of the use cases of the HTMLMediaElement include using methods like play(), pause(), or currentTime to synchronize video with user inputs or other page elements. While events such as loadedmetadata, progress, and ended allow for real-time responses, making the JavaScript video API a great tool for developing applications requiring interactivity, like video editors or video streaming services.
For instance, consider a basic example where you might use the API to loop a video indefinitely:
const videoElement = document.querySelector('video');
videoElement.addEventListener('ended', () => {
videoElement.play();
});
Implementing such a feature is not possible using the video element alone, since there’s no attribute that enables you to play a video infinitely. Essentially, the JavaScript Video API, or the HTMLMediaElement interface, allows you to extend the functionalities of the video element to build custom features such as adaptive streaming, video analytics and engagement tracking, advanced controls and UI, and so on.
Why Choose Between Javascript Video API and HTML5 Video
As we mentioned earlier, the JavaScript Video API and the HTML5 <video> element are not direct alternatives, instead they work in tandem to create rich and interactive video playback experiences: the <video> tag handles the actual media playback in the browser, while the JavaScript API enhances it with advanced capabilities.
However, there are scenarios where you might need to decide whether the native HTML5 video element is sufficient or whether you need to layer a JavaScript Video API on top of it for advanced functionality. This decision typically depends on the complexity of your video needs and the experience you intend to deliver to users.
Below is a quick decision guide comparing both options:
When to Use Only HTML5 Video
HTML5 video is ideal when you need straightforward media playback without additional complexity. Use it when:
- You are embedding a simple playback-only video. For instance, an explainer video on a landing page or a product demo asset.
- You need no custom UI styling and the native video controls are enough.
- You only need traditional MP4 playback and have no requirements for adaptive streaming, analytics, playlist management, and so on.
When to Use JavaScript Video API + HTML5 Video
If your use case falls in any of the categories below then you might need to adopt the JavaScript Video API:
- You’re working with user-generated video uploads and you need to perform real-time transformations or optimizations such as resizing, cropping, and compressing videos dynamically.
- You need to design a custom playback experience, including custom controls, branded UIs, playlists, chapters, annotations, overlays, etc.
- You need to implement video streaming or buffering to create a uniform experience for users across different bandwidths.
Ultimately, if your goal is simplicity and speed, the native HTML5 <video> element will meet your needs. For richer, customized, and more engaging experiences, the Javascript Video API provides the necessary depth. This decision becomes even more important when scaling with external video services in complex projects, as we’ll explore next in integrating the Javascript Video API with Cloudinary
Integrating the Javascript Video API with Cloudinary
Cloudinary is an image and video API platform that provides the capabilities to upload, transform, and deliver media assets using intuitive and user-friendly APIs and SDKs. Built on the native HTML5 video element and the JavaScript Video API, the Cloudinary Video Player is bundled with many valuable customization and integration capabilities, and is monetization and analytics-ready.
Advantages of the Cloudinary Video Player
The best way to understand the Cloudinary Video Player is to picture it as a hybrid version of the HTML5 <video> element and the JavaScript video API. It provides many benefits over standard HTML5 video elements or other third-party players. Some of its key features are:
- Adaptive Bitrate Streaming (ABS): The video player has built-in support for HLS and DASH protocols, and automatically adjusts video quality based on the viewer’s bandwidth, reducing buffering and improving playback experience.
- Responsive Design: The video player automatically adapts to different screen sizes for a consistent experience across desktop, tablet, and mobile screens.
- Analytics and Monetization Support: The player enables you to track viewer engagement with built-in analytics and integrate with tools like Google Analytics and more. You can also monetize your content by serving ads via VAST, VPAID, VMAP, and integrations with Google AdSense or DoubleClick
- Video Transformations: It natively supports Cloudinary’s video transformations, allowing you to apply effects, resizing, cropping, and optimizations directly within the player.
- Customization and Branding: You can easily customize the video player’s appearance, including themes, colors, fonts, and controls, to match your brand, using Cloudinary Video Player Studio.
- Playlist Support: You can pass a list of videos or automatically include all videos that have a specified tag to create a scrollable playlist widget to the right or below your player.
How to Set up Cloudinary Video Player in Your App
This section explores the different ways you can integrate the Cloudinary Video Player in your own projects, from setup to advanced customizations, ensuring you can deliver high-quality videos to your users at scale.
Option 1: Install the video player and import as a module
For modern JavaScript projects, you can install the video player via NPM for full control and tree-shaking benefits:
npm install cloudinary-video-player
Then import the core components:
import cloudinary from 'cloudinary-video-player'; import 'cloudinary-video-player/cld-video-player.min.css';
For additional features like adaptive streaming:
import { adaptiveStreaming } from 'cloudinary-video-player/adaptive-streaming';
Then initialize the player:
const myPlayer = cloudinary.videoPlayer('video-element-id', {
cloudName: 'your-cloud-name'
});
myPlayer.source('sample-video-public-id'); // Provide either the public ID or the raw URL of the video you want to load
Option 2: Include the video player directly from a CDN provider
Alternatively, for quick integrations and testing, you can add the video player to your app using CDN links:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player@3.4.2/dist/cld-video-player.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player@3.4.2/dist/cld-video-player.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Then use/initialize it as described in the previous section.
Option 3: Embed a cloud hosted video player using an iframe
This method allows you to create an instance of the video player and customize it in a graphical interface, using the Video Player Studio. This cloud instance is hosted on Cloudinary’s servers, handling all dependencies for you. You just need to embed it into your app using an iframe:
<iframe src="https://player.cloudinary.com/embed/?cloud_name=demo&public_id=elephants" width="640" height="360" style="height: auto; width: 100%; aspect-ratio: 640 / 360;" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0" ></iframe>
You can see a live example and explore all features of the Video Player in this demo.
Wrapping Up
In summary, the Javascript Video API and HTML5 <video> element complement each other for a rich video playback experience in modern applications. For simple and basic needs, the native <video> element is often all you need, while the JavaScript Video API adds the power, flexibility, and control required for rich, interactive, and scalable video experiences.
On the other hand, the Cloudinary Video Player is a versatile, feature-rich solution that simplifies video delivery while offering powerful tools for customization and optimization. By choosing it, you ensure fast, accessible, and engaging video experiences that scale with your audience.
Dive into effortless video handling and see the difference Cloudinary makes. Sign up today and discover the ease of managing your video content with Cloudinary.
Frequently Asked Questions
Can I use adaptive bitrate streaming (HLS/DASH) with just the native HTML5 video element?
No, the native HTML5 <video> element alone doesn’t support the complex logic required for ABS technologies like HLS or DASH. It requires third-party libraries like HLS.js or DASH.js to parse the manifest files, monitor network conditions, and dynamically swap video segments.
Is it possible to customize video controls without the Javascript Video API?
Yes, you can customize the appearance of the native controls to some extent using CSS pseudo-elements, though browser support is often inconsistent and limited. To achieve a cross-platform and accessible custom control functionality, you’ll need the Javascript Video API.
Which video formats are supported by the HTML5 video element?
This depends heavily on the user’s browser and operating system. Generally, MP4 is considered the most widely supported across all major browsers, while WebM (VP8/VP9) is often used in modern browsers and as a fallback.
