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.
$(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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments