如何动态添加HTML5视频控件

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.

我有一个视频滑块,不包含“视频”标签中的控件。我正在使用自定义播放按钮来发起视频。但是,一旦视频开始播放,我就会淡出我的自定义播放按钮,并希望标准的html5视频控件能够接管。有没有办法只在视频播放时将控件附加到html5视频。任何帮助深表感谢。

2 个解决方案

#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>

#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.

当播放侦听器触发时,您可以检查并查看是否已添加控件。如果它们不存在,它将看到本机控件属性。