![]() We'll be using the addChild method of controlBar class to add our button. 'controlBar' provides multiple methods like getChild or addChild, which allows us to create and add various elements to your player. For the purpose of this article, we're going to use the controlBar options specifically. Pre-Requisite − Assuming that you know how to create a basic video player using the video.js library.įor adding a button to a video player control bar, we're going to make use of various option references exposed by video.js like fluid, audioOnlyMode, controlBar. Adding a Button to the Video Player Control Bar Let's move ahead with adding a button to the video player. In this section of the article, we'll be doing the following things −Īdding a Button to the video player control barĪdding various options to the button - to make it more interactive. Adding Custom Video.js Control Bar buttons Now, in the following portion of the tutorial, we'll begin developing our own button and adding it to the video player. As a result, a custom button may have several applications. For example, adding a button to skip the video 30 secs forward or backward can really be handy for a user, etc. Adding a custom button to a video player gives you greater control over it and it can also enhance a user's experience. In this tutorial, we're going to learn how we can customize the video player using video.js by creating and adding new buttons to our video's control bar. ![]() Apart from supporting a wide range of formats, video.js also provides a lot of functionality and flexibility to customize the video player as desired. It supports all contemporary video formats such as YouTube, Vimeo, Flash, and others, as well as all common video playback formats such as mp4, WebM, Flv, and others. is a well-known online video player javascript library that is used for creating video players in the web browser for a variety of video formats. Player = document.getElementById('video-element') the player variable in the global (window) namespace ![]() The video player’s volume property sets the volume within a range of 0.0 and 1.0 so all we have to do is link it to the value of the volume bar during its onchange event. For instance, on Windows, its Quick Keys are: It should be noted that I based my shortcut keys on the American Foundation for the Blind’s Accessible Video Player. No additional accessibility information should be required either as the nested text for elements will be read by screen readers when the button is accessed, even though we are offsetting the button text for esthetic reasons. The accesskey functionality is completely built into the browser so no coding is necessary. Hence, on Windows Chrome, the shortcut for the Play button would be + P. You can assign any key you wish, but note that the way of accessing the shortcut key varies in different browsers: Browser The accesskey attribute specifies a shortcut key to activate/focus a particular element. Take a look at the HTML markup below and you’ll notice a couple of new controls: the volume-bar range and the full screen button. As a bonus, we’re going to incorporate Access Keys as well. Therefore, we will be implementing those features today. Seeking and full screen viewing capabilities were also absent in that first incarnation. Since then, I received a lot of requests for a slider volume control instead of plus and minus buttons. That HTML5 player was fully functioning and incorporated quite a bit of functionality, including stop/start, pause, replay, volume, and mute actions. Today I thought it high time to revisit my Build an HTML5 Video Player tutorial and build upon what we created. Create Custom Controls for your HTML5 Video Player
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |