Javascript html5 video controls how to#
Javascript html5 video controls code#

Video.addEventListener('timeupdate', progressUpdate) Video.addEventListener('pause', updateButton) Video.addEventListener('play', updateButton) Video.addEventListener('click', togglePlay) Input::-webkit-slider-runnable-track %` Ĭonst scrubTime = (e.offsetX / progress.offsetWidth) * video.duration Transform: translateY(100%) translateY(-5px)

Check out the codepen for compiled styles if you need to. You'll need a precompiler to write something similar. While I called it CSS above, I'll actually be using SCSS to write my styles. This means our JavaScript will rely heavily on event listeners to do anything and everything. These controls and elements may seem daunting to think about having to manipulate with JavaScript but most of the logic will ultimately deal with user interaction.

buttons for skipping ahead and backward.

input range sliders for controlling volume and playback rate speeds.

play-btn div for wrapping the play/pause icons we'll make use of player-controls div of which will have all the controls we want

a video element with a src attribute referenced.

Everything from volume to playbackRate can be adjusted with a few lines of code. Within each video element there are a huge amount of properties we can access with JavaScript to manipulate. We need a variety of controls to manipulate certain parts of the video element's API. The very first step to getting a video element on the page is actually rendering one using the newish video tag. I used different styles, naming conventions, and more to accomplish what you see on the final CodePen. I wanted to take a stab at doing something similar with my own flair.

Javascript html5 video controls code#

Much of the credit for the concept and code structure goes to Wes on this one. I highly recommend giving his course a go as it teaches you modern tips and tricks for JavaScript workflow. I got the initial idea for manipulating an HTML5 Video element from Wes Bos who did a very similar video tutorial in is JavaScript 30 course. I'll be using a combination of HTML, CSS, and JavaScript to accomplish this task which is a bit more advanced than the previous installments in this series.

Javascript html5 video controls how to#

This tutorial teaches you how to create, customize, and manipulate an HTML5 video player using vanilla JavaScript. Welcome to the next installment to my Let's Build: With JavaScript series.