Create A Custom HTML5 Video Player

In this video you will learn how to create a custom HTML5 video player using HTML, CSS and Javascript. This video is a great starting point for you to understand how to a custom video player is created.

[AnhMinh-rjbj]

00:00 - explain the code template
1:04 - change the video size with HTML
2:22 - create control button for video with HTML
11:38 - add time video play bar
16:34 - trigger play/pause to change button with JavaScript
20:40 - change the orange juice depend on video time with JavaScript
23:16 - change the button when the video ends with JavaScript

I write this to note the main point, hope you feel comfortable <3

[lachlaninglis]

Just wanted to let you know that after over 8yrs of css ing haha This one video is one of the most clean JS CSS vids I've ever seen!!!

[akanshgupta]

I did not know anything about web dev and related... This is true gold... I watched it did it and some google search about my doubts. Almost Know all the basics now. Going to browse more functions and uses. thanks a lot, my friend :')

[bassamodaymat]

Amazingly well explained and made it simple for us to understand how and what we're doing

[dcompagnone]

This is SO good to see what the final outcome could be but totally daunting for a beginner - is the code you created published anywhere so that I could play around with it and try and understand it all?

[Luis-viis]

Nice!! I think this is the only video I have ever seen that has ever shown developers how to do this in the most updated way. Keep up the great work my man!

[sinahosseini]

Just wow! An easy solution to a hard problem! Thanks!

[maxqnei]

.orange-juice { transition: width .3s linear } /* for smooth :D */

[maciejwisniewski]

Thank you man :), but how to skip video using orange bar?

[elephant]

Awesome video. I wanted to know how would you program the seek/juice position to be deaggable ? Dragging the seek to any position should forward/reverse the video to that position.

[offbase]

Awesome man you saved my day even in 2020

[ExteraDex]

How to skip the vidio from click orange-juice bar ?

[leslievelvy]

thank you soooo much for this I have been trying to figure out how to do it and you just helped me in just 1 hour omg thank you again!!

[ekbalzayan]

amazing job, plz make a video to describe how u make the page refresh automatically without press on an arrow for reloading a page plz.thanks for ur effort

[ryilmazz]

Very very good tutorial. This is what I was looking for. Thank you very much man.

[clarkmeyer]

this is extremely helpful but I would just like if you could explain how I can make a fast seek function where clicking on the progress bar will take you to that point in time and how to make a button to adjust the volume.

[Bentech]

Man you hit it, That's what i wanted, thanks

[celidee]

Great explanation, the juice bar code is Genius!

[shareefhalaby]

thank you. you helped me to improve my project

[chitmargozniev]

I have a problem. where does the ( "\f144") come from ? is that a image file on your pc? cuz i did something like( content: "\images/pic.png") but that just writes te text en disappeard after I added orange bar. help pls