How to Add HTML5 Video controls dynamically

Question

I have a video slider which does not include controls in the 'video' tags. I am using a custom play button to initiate videos. However, once the video has begun playing, I am fading out my custom play button and would like the standard html5 video controls to take over. Is there a way to append the controls to html5 video only if the video is playing. Any help is much appreciated.

Answer 1

 $(function(){ $('#btn').on('click', function(){ $('#vid')[0].play(); $(this).hide();}); $('#vid').on('play', function (e) { $(this).attr('controls','true'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video width="400" id="vid" > <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/> Your browser does not support HTML5 video. </video> <button id="btn">Play</button> 

Answer 2

You will want to utilize the 'playing' listener event .

$('video').on('playing', function (e) {
  if (!this.hasAttribute("controls")) {
     this.setAttribute("controls","controls") 
  }
});

When the playing listener fires, you can check and see if the controls have been added. If they don't exist, it will see the native controls attribute.