How to create custom video player using HTML, CSS and JavaScript | No plugin

by | Oct 20, 2021 | 0 comments

How to create custom video player using HTML, CSS and JavaScript | No plugin

by | Oct 20, 2021 | CSS Tips and Tricks | 0 comments



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

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>