Displaying the current time and total time of a custom video player using Javascript

Question

Displaying the current time and total time of a custom video player using Javascript

Currently, I'm in the process of creating an html5 video player and have incorporated javascript to update the current time as a fraction of the total time. The script I've written so far is as follows:

function updateTime() {
    var curTime = mediaPlayer.currentTime;
    var totTime = mediaPlayer.duration;
    timePlayed.innerHTML = curTime + '/' + totTime;
}

I've attached an event listener at the beginning to ensure that the script functions correctly. However, the output displays something like 23.703/285.067513. Is there a way to modify it to show a format similar to 00:00 / 00:00 resembling the YouTube video player? This would entail displaying minutes followed by seconds for both the current time and total duration. In terms of my html code, I only have a span element like this:

<span id="timePlayed">00:00/00:00</span>

. Any assistance with resolving this issue would be greatly appreciated. Thank you!

javascript css html video

Answer 1

Answer №1

Perhaps you might want to consider using a different function for this task. Take a look at what I came across.

function convertToTimeFormat(seconds)  {
var time = new Date(1970,0,1);
time.setSeconds(seconds);
return time.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); }

Answer 2

Perhaps you might want to consider using a different function for this task. Take a look at what I came across.

function convertToTimeFormat(seconds)  {
var time = new Date(1970,0,1);
time.setSeconds(seconds);
return time.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); }

Answer 3

Answer №2

Here are some steps you can take to resolve your problems:

video.addEventListener("timeupdate", function() {
  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var hours = Math.floor(minutes / 60);
    hours = (minutes >= 10) ? hours : hours;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return hours + ":" + minutes + ":" + seconds;
}
var seconds = video.currentTime;
currentTime.innerHTML = formatTime(seconds);
});


video.addEventListener("timeupdate", function() {
function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return minutes + ":" + seconds;
}
var seconds = video.duration;
durationTime.innerHTML = formatTime(seconds);
});

Ensure that you have the correct HTML Markup set up as shown below:

 <span id="currentTime">00:00:00</span> / <span id="durationTime">00:00:00</span>

Answer 4

Here are some steps you can take to resolve your problems:

video.addEventListener("timeupdate", function() {
  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var hours = Math.floor(minutes / 60);
    hours = (minutes >= 10) ? hours : hours;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return hours + ":" + minutes + ":" + seconds;
}
var seconds = video.currentTime;
currentTime.innerHTML = formatTime(seconds);
});


video.addEventListener("timeupdate", function() {
function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return minutes + ":" + seconds;
}
var seconds = video.duration;
durationTime.innerHTML = formatTime(seconds);
});

Ensure that you have the correct HTML Markup set up as shown below:

 <span id="currentTime">00:00:00</span> / <span id="durationTime">00:00:00</span>

Displaying the current time and total time of a custom video player using Javascript

Answer №1

Answer №2

Similar questions

How come the values in my object remain inaccessible even after assigning values to it with navigator.geolocation.getCurrentPosition() and returning it?

The desired popup window failed to show up after the button was clicked

Stop users from being able to input line breaks by pasting

Ways to conceal a div element when the JSON data does not contain a value

Customize the CSS for a Material UI popover styling

What causes the removeChild function to exhibit distinct behaviors when it comes to list items versus i tags?

The reset function for the selector is failing to properly reset the data within the table

Display a featherlightbox popup when the page loads

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

Modify the href value by matching it with the parent div attribute

Guidelines for setting up Kendo notifications using an angularjs service

What steps can I take to minimize the excessive white space below the footer on my website?

Experimenting with an Angular Controller that invokes a service and receives a promise as a

Discovering all the links present on a webpage using node.js

Tips for enabling the background div to scroll while the modal is being displayed

Adding elements to a roster

Using CSS to target specific attributes on standalone elements

Change the icon switch from fas fa-lock-open to fas fa-lock by adding an event listener for a click action

Innovative concepts for designing web applications

The issue of an unsuccessful Ajax call arises in a WordPress plugin when utilizing wp_remote_get