How to use media element control in HTML5


In This Post, we will discuss How to use media element control in HTML5 in easy steps. HTML Media element has many methods, properties, and events, you can provide custom controls for the media or a custom means to start and stop the media playback. The following is a small example of using the methods, properties, and events. Consider the following HTML document.

<!DOCTYPE html>

<html xmlns=”>



          <link href=”default.css” rel=”stylesheet” />

           <script src=”Scripts/jquery-1.8.3.js”></script>

           <script src=”Scripts/default.js”></script>



          <video id=”media” height=”480″>

          <source src=”eagle.webm” type=’video/webm; codecs=”vorvis, vp8″ />

          <source src=”eagle.ogv” type=’video/ogg; codecs=”theora, vorbis” ‘ />

          <source src=”eagle.mp4″ type=’video/mp4; codecs=”avc1.42E01E,mp4a.40.2″ ‘ />

          <track id=”englishtrack” kind=”subtitles” src=”captions.vtt”

                        Srclang=”en” label=”English” default=” ” />


     <br />

     <button type=”button” id=”play”>Play</button>



 This document contains a reference to the jQuery library and the defaults.js file. It also contains an <video> element whose id attribute is set to media, and the controls attribute is not set.

How to use media element control in HTML5
How to use media element control in HTML5

There are <source> elements for the webm,.ogv,and .mp4 video files.A caption file is in WebVTT format.under the <video> element is a <button> element whose id is set to play.Because the controls attribute is not set, the <video> element doesn’t display the built-in controls such as play/pause, the position indicator, and the full-screen button. Sometimes, you might not want to allow the user to maximize the video, so turning off the controls is appropriate. If so you must provide your own play/pause button, as shown in the following default js. file.

/// <reference path=”jquery-1.8.3.js” />

$(document) .ready(function () {

      $( ‘ #play’ ).on( ‘click’ ,playstop);

      $( ‘#media’).on (‘play’ ,function ( ) { $ (‘#play’).html(‘pause’ ) ; });

     $( ‘#media’).on (‘pause’ ,function ( ) { $ (‘#play’).html(‘play’ ) ; });


function playStop( ) {

     var media=$( ‘#media’ ) [0];

     if (media.paused) {;

else {




 In the default.js file, the document ready method is added with the code to subscribe to the events. The click event on the play button executes the play stop function. The playStop function gets a reference to the media element and then uses the paused property to determine whether to play or pause the video by executing the play or pause method.

Post a Comment

Post a Comment (0)