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. 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.
0 Comments
Intel is providing the Materials for free and Your use of them is at Your own risk. Intel is not required to maintain, update, or support the Materials. |
AuthorPatrick ArchivesCategories |