VideoPlayer with Javascript

 

Features:

Videoplayer with controls.including play/pause,volume,speed and fullscreen

icons from font awesome

fullscreen function from w3c for different browsers choices

CODE Github

DEMO

HTML

link a video in the player. 

playinline : prevent video fullscreen automatically because there is a fullscreen button inserted.

progress range at the top of control container.

left side: play button and volume icon&range.

right side:speed ,time and fullscreen.

CSS

basic setup

root style for later.

background is a pattern.

player had a border and video streched inside.

align at both sides with flex.

transition opacity when hovering.

progress range calculated width. make sure space between number or won't work

play/pause

volume

change volume bar through width

speed and time section

selection transparent.

time can't be selected

center the video when fullscreen 

For different screen, resize the video.

JAVSCRRIPT

DOM selected.

when click the play button,toggle pause and play icon and also the tittle.

control with video.play() and pause() event.

display the current and duration time at the right corner.

change the progress bar 

when click the bar,change the new time.

e.offset is the width of current point. 

offsetWidth is the total width of bar.

open and close fullscreen function from w3c.

Add event listener.