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
Creating a custom video player from scratch using vanilla JavaScript (without relying on third-party libraries or frameworks) provides developers with complete control over the video player’s features and functionality. This allows for a high degree of customization, enabling the player to be tailored to specific project requirements while understanding the underlying mechanics of video playback. Core Components of a Custom Video Player 1. HTML Structure The basic foundation for any video player involves the
element, which provides built-in playback functionality. However, a custom player requires you to hide the default controls and build your own UI components such as play/pause buttons, volume sliders, and progress bars. Example HTML Structure:
Your browser does not support the video tag.
Play
0:00
/
0:00
Mute
Explanation: The
tag is used to embed the video file. Custom controls like play/pause button, volume slider, and progress bar are created manually. The
tag specifies the video file source (e.g., MP4). 2. CSS Styling CSS styling is to ensure the player looks consistent and intuitive across different devices and screen sizes. By positioning controls relative to the video element and applying responsive design principles, the player can maintain usability on desktops, tablets, and mobile devices. Example CSS Styling: #custom-player { position: relative; background: #000; border: 1px solid #ccc; width: 600px; } #video { width: 100%; height: auto; } .controls { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; } input[type='range'] { width: 150px; } Explanation: The player is styled with a black background, borders, and a width of 600px. Controls are placed at the bottom with flexbox for alignment. The range input elements (seek bar, volume slider) are styled to fit the player. 3. JavaScript Functionality JavaScript connects UI controls with the video element’s API to implement interactive playback control, volume adjustment, progress display, and user input handling. Event listeners track video progress and user actions, updating the interface in real-time. Example JavaScript Code: const video = document.getElementById('video'); const playPauseBtn = document.getElementById('playPauseBtn'); const seekBar = document.getElementById('seekBar'); const volumeBar = document.getElementById('volumeBar'); const muteBtn = document.getElementById('muteBtn'); const currentTime = document.getElementById('currentTime'); const duration = document.getElementById('duration'); // Play/Pause button functionality playPauseBtn.addEventListener('click', () => { if (video.paused) { video.play(); playPauseBtn.textContent = 'Pause'; } else { video.pause(); playPauseBtn.textContent = 'Play'; } }); // Seek bar functionality video.addEventListener('timeupdate', () => { const value = (video.currentTime / video.duration) * 100; seekBar.value = value; // Update current time display let current = Math.floor(video.currentTime); let minutes = Math.floor(current / 60); let seconds = current % 60; currentTime.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; // Update duration display let durationValue = Math.floor(video.duration); let durationMinutes = Math.floor(durationValue / 60); let durationSeconds = durationValue % 60; duration.textContent = `${durationMinutes}:${durationSeconds < 10 ? '0' + durationSeconds : durationSeconds}`; }); // Volume control functionality volumeBar.addEventListener('input', () => { video.volume = volumeBar.value / 100; }); // Mute button functionality muteBtn.addEventListener('click', () => { if (video.muted) { video.muted = false; muteBtn.textContent = 'Mute'; } else { video.muted = true; muteBtn.textContent = 'Unmute'; } }); // Update seek bar value on user input seekBar.addEventListener('input', () => { video.currentTime = (seekBar.value / 100) * video.duration; }); Explanation: The Play/Pause button toggles between play and pause states. When the video is paused, it starts playing; when it’s playing, it pauses. Seek bar is updated based on the video’s current time and allows users to manually scrub through the video. Volume bar controls the video’s volume. Mute button mutes/unmutes the video and updates the button text accordingly. Time update displays the current time of the video and the total duration. Enhancing the Custom Video Player Full-Screen Mode Adding full-screen support improves the viewing experience by allowing users to expand the video to cover the entire screen. This is achieved using browser-specific fullscreen APIs. Example Full-Screen Mode: const fullscreenBtn = document.getElementById('fullscreenBtn'); fullscreenBtn.addEventListener('click', () => { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } }); Explanation: When the full-screen button is clicked, the browser enters full-screen mode using the requestFullscreen() method. Full-screen functionality works across most modern browsers, though the method names vary slightly between browsers (e.g., mozRequestFullScreen for Firefox). Custom Subtitles Subtitles increase accessibility and support multilingual content by displaying timed text overlays. They are integrated using the
element with WebVTT files. Example Custom Subtitle Integration:
Explanation: Subtitles are added by specifying a .vtt (WebVTT) file with the
tag. Multiple languages can be provided by adding additional
elements with different language codes ( srclang='en' for English, srclang='es' for Spanish). Adding Keyboard Shortcuts for Accessibility keyboard shortcuts enhance accessibility by allowing users to control the video player without relying on a mouse or touch input. It also benefits users who prefer keyboard navigation for faster interaction. document.addEventListener('keydown', (e) => { if (document.activeElement !== seekBar) { // Avoid conflict with slider focus switch(e.code) { case 'Space': video[video.paused ? 'play' : 'pause'](); break; case 'ArrowLeft': video.currentTime -= 5; // 5-second rewind break; case 'ArrowRight': video.currentTime += 5; // 5-second forward break; case 'M': video.muted = !video.muted; // Toggle mute break; } } }); Explanation: Space toggles play/pause without interfering with form controls Arrow keys enable 5-second seek jumps M key mutes/unmutes for quick audio control Checks activeElement to avoid conflicts with slider input
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
