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

In this video, we're going to learn how to create a custom video player using HTML, CSS and JavaScript. No plugin required!

That's right- in this video, we're going to learn how to create a custom video player using HTML, CSS and JavaScript. No plugin required!

Not only is this a handy ability to have if you need to create a custom video player for your website or blog, but it's also a great skill to have if you're want to create custom video players for your own YouTube videos. After watching this video, you'll be able to create a custom video player in no time!

How to create custom video player using HTML, CSS and JavaScript | Free source code.
Watch full video player playlist 👇;

Download Codes From Here 👇;

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
Follow me on
Instagram 👇 :-
Facebook 👇 :-

****************************************************************
LIKE || SHARE || SUBSCRIBE || PRESS THE BELL ICON
****************************************************************
*********************
Thank For Watching
*********************
*********************
S-Tech04
*********************

Music Credit:
Track : Ikson - Anywhere (Vlog No Copyright Music)

Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.

Lyrics: Cartoon - On & On feat. Daniel Levi
Music provided by NoCopyrightSounds.

Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)

#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

[nopolionmoviesseriesandfun]

Hello please i want to develop this video player and i want to added to that something i will do it on visual code mobile you know how to do it for beginning because i dont have laptop and i want to added on my app

[arthurceci]

Could I implement a player capable of pausing a video when another video play button is clicked? And when the actual video is paused the another one is now playing again? I want to make it work for youtube videos and the videos have to be paused or played (depends on the user's action) automatically, in the background, without the need for changing tabs

[silentking]

Bro when changing source it just loads and nothing happens can you help with this ..plz overall player is nice and searching for this

[Anandhumaro]

Video src main Jo video aap Dale ho wo wala mere main nahi aa raha hai toh main uske badle kuchh aur de dungi toh sajaye ga

[aubisoka]

This -webkit-appearance: none;
appearance: none;
height: 3px; causes issues in the volume_range, ... the range is not shown inline, as it is in your tutorial. I send over two hours, but i cannot figure out, what is the problem.... when i put these three lines in comment, it is shown inline. Can you help me, what have I done wrong? thank you!

[dopacoding]

problem that i cant insert video ... i did do source of my video but nothing work

[neoistone]

Great work out bro 😎 keep going improve skills daily best of luck bro

[mindethereal]

Thank you for sharing your knowledge and code to us beginners, thank you!

[LM_Trader_Programming]

Your player is incredible, it helped me a lot but it still lacks the part of subtitles and multi-languages ​​for movies and series...

[NoNameUzbs]

lessons are good
Also teach you how to make an awesome slider

[FartherOfShaytan]

Can you make range slider without tag <input type="range">

[danielfchaconpaucar]

Wow!!! Eres un capo Gracias. Por el código está muy detallada gracia mi hermano.

[emielv]

this is definitely the best tutorial on this topic, thank you very much!

[maskness]

Bro video in dual audio language change option audio track button

[musadelibas]

Thanks for the content. But you need to some video edit bro.