Ditch the Countdown: Displaying Current Time in Video.js
You're using Video.js, a popular HTML5 video player, and you're likely frustrated with the default behavior of displaying the remaining time instead of the current time during playback. This is a common issue, and it's actually quite easy to fix!
Here's the code snippet you're working with:
<p>I use <a href="http://videojs.com/" rel="noreferrer">VideoJS</a>, a HTML5 video player</p>
<p>By default it displays the remaining time (countdown) instead of the normal current time (like youtube)</p>
<p>Any ideas how to "fix" it? You can see a live example at <a href="http://videojs.com/" rel="noreferrer">their official website</a></p>
The key to switching to current time display lies in utilizing the currentTime property within the Video.js player. By making a small adjustment to your JavaScript code, you can achieve the desired functionality.
The Solution:
-
Identify the Element: You'll need to select the HTML element that displays the time within your Video.js player. This is usually a
<span>or<div>element with a specific class or ID. -
Modify the Time Display: Within your JavaScript code, use a
setIntervalfunction to constantly update the content of the selected element. The interval should be set to a reasonably short duration (e.g., 100 milliseconds) for a smooth display. Inside thesetIntervalfunction, access thecurrentTimeproperty of your Video.js player and format it to your liking.
Example Implementation:
// Assuming your time element has the class "vjs-current-time"
const timeElement = document.querySelector('.vjs-current-time');
const player = videojs('myVideoPlayer'); // Replace 'myVideoPlayer' with your player's ID
setInterval(() => {
const currentTime = player.currentTime();
const formattedTime = formatTime(currentTime); // Use a function to format the time as desired
timeElement.textContent = formattedTime;
}, 100); // Update every 100 milliseconds
// Example time formatting function
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}
Explanation:
- We select the time element using its class
vjs-current-time. - We use
setIntervalto continuously update the time display. - We access the player's
currentTime()method to retrieve the current playback position. formatTimeis a sample function to format the time in minutes and seconds. You can customize this function to suit your preferred time formatting.
Benefits of Using Current Time:
- Enhanced User Experience: Viewing the current time instead of the remaining time provides a clearer understanding of the video's progression.
- Improved Navigation: It becomes easier to locate specific points in the video.
- Consistency with Other Platforms: Many popular video platforms (like YouTube) display current time, making the experience familiar for users.
Key Resources:
- Video.js Documentation: https://videojs.com/
- Video.js API: https://videojs.com/docs/api/
By making this simple change, you'll significantly improve the usability and user experience of your Video.js player. Remember to always check the official documentation for any updates and new features related to time display.
