Display total and elapsed time

[ThiagoDella]

Display video's total and elapsed time between the play button and moment bar.

• It should be formatted as 00:25/5:00

[sivakumarlakkoju]

Hello I want to work on this, mentoring needed.

[ThiagoDella]

Hi @sivakumar97 , nice that you want to try it!

Do you have Vue.js installed on your machine? You can check the installation guide hier.

The next step is to fork this repo to your own GitHub account.

Try running it after navigating to your project folder, just run npm run dev on your terminal.

Reach me again to speak about the project if everything runs fine! 👍

[sivakumarlakkoju]

Hi @ThiagoDella , I'm having issues running the npm run dev command. Please help.

[ThiagoDella]

Can you post a screenshot of your error?

(Do you have Node.js on your machine? You need also to run npm install before npm run dev)

[sivakumarlakkoju]

I did as suggested and i got the application running, on a host.(Screenshots attached )

[sivakumarlakkoju]

Please give me further instructions

[ThiagoDella]

Cool!

Reach to http://localhost:8080 and you will probably see the player running.

You will be using the file inside src/components/v-video.vue

We are exposing the video player with the variable called this.$refs.player. This variable has also a key called duration and one called currentTime. You will need to convert them to a user friendly time.

I already do this on this line:

const actualTime = (this.$refs.player.currentTime / this.$refs.player.duration) * 100;

So you can get the ideia from there. After that you need to adapt the layout of the player to display those information. Like the start request from this Issue :)

Reach me if you have problems after trying !

[sivakumarlakkoju]

What do you actually mean by actualTime?

[ThiagoDella]

Sorry! I was supposed to say duration. It is the total duration of the video playing :D

[sivakumarlakkoju]

Can you please, explain the meaning of this line - const actualTime = (this.$refs.player.currentTime / this.$refs.player.duration) * 100; ?

[ThiagoDella]

Hi bro, it is how we discover the percentage of how many time has passed since the beginning of the video in respect to the total time of it.

I am quite sure that we are using it on the progress bar.

[ThiagoDella]

@sivakumar97 Any progress on this?