![]() fires when page loads, it sets the min and max range of the video Video.addEventListener('durationchange', SetSeekBar, false) Video.addEventListener('timeupdate', UpdateTheTime, false) (false is for bubbling and true is for event capturing) ![]() attach timeupdate, durationchange event to the video elementĮventTarget-addEventListener to know more about addEventListener Var seekbar = document.getElementById('seekbar') Var volumeRange = document.getElementById('volume') Var video = document.getElementById("video1") get the video, volume and seekbar elements This function calculates the time in seconds and divide them to get the duration in hours, minutes and seconds ![]() Defining UpdateTheTime() function that executes when the video plays and the duration is updated in the video element.This simply set the current time of the video to the seek bar value (changed by user, if any) Defining ChangeTheTime() function that executes when the seekbar changes.This function sets the max and min range of the video to the duration of the video Defining SetSeekBar() function that is called when durationchange event executes on the video element (when the video is loaded).If the volume being changed by user is 0 then we are setting the video to mute mode otherwise setting muted to false so that sound starts coming Here are first get the current volume and set to the video volume. Defining ChangeVolume() function that executes when user tries to change the volume.Setting the current volume of the system to the volume range element so that both are in sync Attaching timeupdate and durationchange event to the video element.Declared variables for video, volume and seekbar.In below code snippet, we are doing following Now, let's see the JavaScript code that is used to define the events and function attached to the html5 elements above. Seekbar - calls ChangeTheTime() function that shows time duration of media played.Change sound volume - calls ChangeVolume() function on change.This code can also be used to create custom html5 video player.īelow html5 video tag would create a custom video player user interface to control the playing of the video on the web page. To control video using our own html element is similar to the controlling audio using our own html element, below code snippet is just the replacement of “audio” word to the “video” word in the previous audio code snippet. Of course this custom control set is currently useless and doesn't do a thing: Let's improve the situation with JavaScript.In previous post, we learnt how to work wtih html5 video element. Again if a user has JavaScript disabled, the custom control set will not appear and they can use the browser's default control set unhindered. The controls are initially hidden with a CSS display:none and will be enabled with JavaScript. The span within the element is for browsers that do not support the progress element and will be updated at the same time as progress (this span element won't be visible on browsers that support progress). Html Play/Pause Stop Mute/Unmute Vol+ Vol- Fullscreen Įach button is given an id so it can be easily accessed with JavaScript. This provides the player with data such as video duration and format. Doing things this way still allows users who have JavaScript turned off (for whatever reason) to still have access to the browser's native controls.Ī poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. Html Download MP4 © Blender Foundation |Įven though this player will define its own custom control set, the controls attribute is still added to the element, and the player's default control set is switched off later with JavaScript.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |