![]() Closing NotesĬongratulations, if you followed the tutorial you learned how to implement your own video player and add custom controls using JavaScript. Additionally, mousedown, mousemove, and mouseup will be used to enable sliding through the video while holding the mouse button down on the progress bar. Also clicking anywhere on the progress bar will call the jump(e) method and the video will jump to the position. The handleProgress() will be called at every timeupdate event. The last part contains all event listeners that are needed for the progress bar. The jump(e) function is used to enable clicking on the progress bar to jump to the position within the video. handleProgress() will be responsible for updating the progress bar. In this snippet, the progress container and the progress_filled element will be selected and two functions will be added: handleProgress() and jump(e). Progress.addEventListener("mouseup", () => (mousedown = false)) Progress.addEventListener("mousemove", (e) => mousedown & jump(e)) Progress.addEventListener("mousedown", () => (mousedown = true)) Progress.addEventListener("click", jump) VideoContainer.addEventListener("timeupdate", handleProgress) ![]() If (videoContainer.paused || videoContainer.ended) %` Ĭonst position = (e.offsetX / progress.offsetWidth) * videoContainer.duration ![]() To enable play and pause the video you have to add a new button to the index.html: Īfterward, open your script.js and enable functionality by adding this code: const videoContainer = document.querySelector(".video-container") Ĭonst playPauseBtn = document.querySelector(".playPauseBtn") Screenshot of the video player UI without controls attribute Add Play and Pause Now, check your browser you will recognize that the controls are gone and you cannot play the video anymore. To customize the video player, you first have to remove the controls attribute that displays Play, Pause, Volume, etc because you will implement your own custom controls within this tutorial. Save and open your index.html and load it within the browser to see the embedded video player as seen below: Screenshot of the video player UI Customize the Video Player With JavaScript You can find out more about all video attributes here.īefore continuing you should apply all styles that are needed within this tutorial by populating your style.css with all styles from this CodePen. For example, the controls attribute displays the standard player controls when added or set to true. The HTML5 tag accepts several native attributes. Furthermore, the tag is used to display pre-defined content to user agents that do not support the video element. HTML5 specification supports three different video formats and the snippet used multiple tags to make the videos available in MP4 and WebM. You can either use my default video or add any video from your local computer by adjusting the src attribute. ![]() Within the above code, the element uses a remote video from my FTP. How to build a video player in Javascript To add a simple video player to our application we have to add the following code to our index.html: And we’ll teach you how to do it in this article!īy the end of this guide you’ll have something similar to this, so if you’re excited, keep reading and follow this tutorial step-by-step! Setting Up the ProjectĪssuming you are working with UNIX system (or have Git BASH on Windows) you can create all three files that are necessary to build a video player in JavaScript with this command: mkdir video-player It’s elementary and doesn’t have many features, so if you want to stream a video on your website in a more professional way using your personal video player, you’ll need to use JavaScript. Then, by using one simple attribute called controls you’ll have a default video player which was built into the browser. To do it you will need only a simple tag that was added in HTML5 and give a link to your video stored on your computer. Nowadays, we have JavaScript with the new version of HTML5, with these new technologies and tools we can stream our video much quicker, easier, and without any latency. You needed to install a plugin and only play your media while using it, so as you can see it was very uncomfortable, with low speed and high delays. Probably, a decade ago it was impossible to play your video or audio inside of your browser without any third-party services such as Flash or Silverlight. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |