如何动态添加 HTML5 视频控件

Question

我有一个视频滑块，它不包含 'video' 标签中的控件。我正在使用自定义播放按钮来启动视频。但是，一旦视频开始播放，我就会淡出我的自定义播放按钮，并希望标准 html5 视频控件接管。有没有办法仅在视频正在播放时将控件附加到 html5 视频。非常感谢任何帮助。

Answer 1

您将需要使用 'playing' listener event。

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

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

Answer 2

$(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>

如何动态添加 HTML5 视频控件

How to Add HTML5 Video controls dynamically

html

javascript

video

jquery

html5-video