Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
The HTML5
element enables native video playback directly in the browser without relying on plugins. It supports a set of JavaScript APIs that allow developers to programmatically control video behavior such as play, pause, seek, volume, and track selection. Built-in controls can be used for quick implementation, while custom controls offer greater flexibility and UI integration. The API also exposes video metadata, events, and track management options for subtitles and captions. Developers can listen to playback events to update the interface or trigger application logic. This functionality is essential for building responsive, interactive video experiences on the web. HTML5 Video Controls The
element includes a controls attribute that renders default playback controls (play/pause, seek bar, volume). These built-in controls are useful for basic use cases, but for custom functionality or styling, developers often override these controls with JavaScript-based interfaces. Built-in Video Controls By adding the controls attribute to the
tag, you enable the browser’s default video controls:
Your browser does not support the video tag.
This automatically adds UI elements like play/pause buttons, volume control, and a seek bar. While convenient, developers often need more flexibility, which can be achieved via the Video API. Custom Video Controls with JavaScript You can implement custom controls by adjusting the video’s playback properties via JavaScript. For example, controlling playback, volume, and seeking:
Your browser does not support the video tag.
Play/Pause
Set Volume to 50%
Seek to 30s
Explanation: playPause(): Toggles the play/pause state. setVolume(): Adjusts the video’s volume (between 0.0 and 1.0). seekTo(): Moves the playback to a specified time (in seconds). Managing Video Tracks: Subtitles and Captions HTML5
supports multiple text tracks, such as subtitles, captions, and chapters, using the
element. Tracks can be displayed automatically or controlled via JavaScript. Adding and Controlling Tracks Each
tag defines a single timed text track. The browser may expose track selection options in the UI if multiple tracks are provided.
Explanation: kind='subtitles': Specifies the type of track (subtitles, captions, chapters). srclang='en': Defines the language of the track (English in this case). label='English': A label that the player can display to the user. JavaScript Control of Tracks You can enable, disable, or change tracks dynamically with JavaScript: var video = document.getElementById('myVideo'); var track = video.textTracks[0]; // Access first subtitle track // Enable the first subtitle track track.mode = 'showing'; // Disable all tracks for (var i = 0; i < video.textTracks.length; i++) { video.textTracks[i].mode = 'disabled'; } Explanation: track.mode = 'showing': Displays the subtitles for the selected track. track.mode = 'disabled': Disables the track (i.e., stops displaying subtitles). Handling Video Events HTML5 Video API provides several events to handle user interactions and video playback states. These events can be useful for custom logic, such as updating UI elements or performing actions when the video reaches a certain state. Common Video Events Here are some common events associated with the
element: Example of Handling Video Events
Your browser does not support the video tag.
Explanation: The play, pause, and ended events log messages when the video enters these states. timeupdate logs the current playback time during playback. volumechange logs changes in the volume level.