How to create custom video player using HTML, CSS and JavaScript | Free source code
Live Demo
https://s-tech04.github.io/Custom-Video-Player/
Download Codes From Here
➤ Source code will be uploaded soon
Chapters
00:00:00 ➤ Demo
00:04:45 ➤ HTML
00:11:54 ➤ CSS
00:37:25 ➤ Start JavaScript
00:40:38 ➤ Video Play Pause Function
00:43:38 ➤ Video Fast Rewind Function
00:43:53 ➤ Video Fast Forward Function
00:44:57 ➤ Add total video duration
00:47:20 ➤ Add Current video duration
00:49:26 ➤ Change progress bar width With current time
00:51:15 ➤ Change progress bar width and current time When click on Progress Bar
00:54:13 ➤ Change Volume
00:58:39 ➤ Show the time when hover the progress bar
01:05:06 ➤ Auto play Function
01:08:38 ➤ Picture_in_Picture Function
01:09:12 ➤ Full Screen Function
01:11:35 ➤ Change Video Playback Speed
01:16:24 ➤ Save Video duration in local storage
01:20:34 ➤ Hide and show controls
Html & CSS Tutorial :
Subscribe Our Channel
https://www.youtube.com/c/STech04
Follow me on
Instagram 👇 :-
https://www.instagram.com/saiflaghari04/
Facebook 👇 :-
https://web.facebook.com/stech04/
****************************************************************
LIKE || SHARE || SUBSCRIBE || PRESS THE BELL ICON
****************************************************************
*********************
Thank For Watching
*********************
*********************
S-Tech04
*********************
Music Credit:
Track : Ikson – Anywhere (Vlog No Copyright Music)
➤ Watch: https://youtu.be/UY08PUqArZI
Free Download / Stream: http://ncs.io/_Crazy
Track: BEAUZ & JVNA – Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/xgcLwtGlgLU
Free Download / Stream: http://ncs.io/_Crazy
Lyrics: Cartoon – On & On feat. Daniel Levi
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/K4DyBUG242c
Free Download / Stream: http://ncs.io/_Crazy
Track: Jimmy Hardwind – Want Me (feat. Mike Archangelo)
➤ Watch: https://youtu.be/-Rw8zR9wmTY
#STech04 #html #css #javascript #frontend #FrontEndDevelopment #html #HTML5 #CSS #CSS3 #javascript #webdevelopment #webdeveloper #webdevelopers #uidesign #webdesign #Coding #100DaysOfCode #onlineTutorials #shorts
Disclaimer: Copyright Disclaimer Under Section 107 of Copyright Act 1976, allowance is made for “fair use” for purposes such as criticisms, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
source