Member-only story
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
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 the control container.
left side: play button and volume icon&range.
right side:speed ,time and fullscreen.
CSS
basic setup
root style for later.
the 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 the number or won’t work
play/pause
volumechange volume bar through the width
speed and time section
