custom video player with Javascript

 As we know the video and audio player is the part of HTML5. With "controls" attribute, it's automatically adding the modern player interface according to different browsers. 

But For leaning and custom more advanced functional player, it's good to do it with Javascript to understand how the events going on.

Features:

video api video.play() & video.pause()

progress custom

timestamp calculating

Github code

HTML

link all the needed styles. 

the range.css is from css tricks

the play and stop icon are from font-awesome

video tag with a poster to show the image default

the controls have four parts,play button,stop button, progress bar and timestamp.

CSS

the screen is the audio player with border on the top

the four parts in the controls inline display.

the button without border

for small screen setup

JS

select all the DOMs

when click the video,toggle the status of videoo

when pause and play the video,update the icon in the bar and change the progress 

click event on play and stop button

when progress changes,the video change the current time

toggle play and pause event when click the video

when the status of video is paused,the button should be  a pause,either way the button is a play.

there is not stop(). which can replace by pause() and  also retrait to beginning of video

When click on the progress bar,the video should play the current time according to current progress bar position.

 

For displaying the timestamp,the current time is a digital time with double number.

Meanwhile the progress bar should be same with video current time.

More:

MDN video and audio API

another demo about video player with Javascript which has more functions.