Var percentage = 100 * currentPos / maxduration //in % Var maxduration = video.duration //Get video duration Var currentPos = video.currentTime //Get currenttime
Since we are able to get video current playback time and video duration, why not convert these data into great looking video progress bar? īelow shown the formula for conversion of video duration and video current playback time into progress bar with help of JavaScript. We could easily detect it using HTML5 video loadedmetadata event.Īs for current video playback time, we can use HTML5 video timeupdate events to keep tracks of it. In order to get HTML5 video duration, we have to make sure the video metadata is loaded. Hereby we are going to display video current playback time and duration. HTML5 video also support for video playback. Play/Pause control clickedĭisplay Video Current Playback Time and Duration We can easily control video status using HTML5 video DOM functions, which are. First, we’ll create a simple Play/Pause control over our video. Var video = document.getElementById('videoID') //or That’s why we can’t directly using jQuery selector to call/use HTML5 video DOM attributes and functions before convert it to DOM object. However, this is not equivalent to jQuery $('#videoID') targeting which will return a jQuery object, not a DOM object. In JavaScript we use getElementById('videoID') to target the video element. Luckily, HTML5 media elements (audio and video) support for media elements API, which we can access using JavaScript and use them to wire up our HTML5 video controls.īefore get started with coding, let me briefly explain about jQuery video element targeting. Get Started with Custom HTML5 Video Controls
#Jquery html5 video player mp4#
#Tips: Due to a bug in the iPad, you have to put MP4 format as the first source if you wish HTML5 video works in iPad. If you having problem to encode your video to the HTML5 formats mentioned above, try Miro Converter, it support for both Window and Mac. Of course, you might use Flash as fallback as well! It is also advisable to put some text as fallback inside video element, in case user browser doesn’t support HTML5 video. It is best practice to include three video formats – MP4, WebM, and Ogg as source elements in order to have your HTML5 video works cross browsers. Your browser does not support the video tag. Hope you will find it useful!īefore we get started, let’s recall for HTML5 video basic markup. In this post I’m going to show you the way to build your own custom HTML5 video controls using jQuery. In order to have a consistent HTML5 video controls across all browsers, we have to integrate own custom HTML5 video controls rather than using default controls.Īctually, it is not hard to have custom HTML5 video controls. However, each browser provides native browser video controls. It is now already supported by most modern browsers, and even so for IE9. $duration = $spc.HTML5 video element, one of the most popular features in HTML5. $('#our-video').buffered // Amount of video buffered in seconds $('#our-video').duration // Duration of video $('#our-video').currentTime // Current video time $('#our-video').volume = 1 // Sets volume, volume ranges from 0 to 1 $('#our-video').pause() // Pause the video Here’s a bunch of things which become useful when creating a custom player: There are a bunch of features as part of the media elements API which can be used to control a video or how it is displayed. We’re using here so we target a specific element (in the same way that document.getElementById() works!)Įasy, huh? Well it’s also possible to control a variety of video aspects with the media elements API, and you can create some pretty interesting things.
0 kommentar(er)
