如何添加HTML5动态视频控件

问题描述：

我有一个视频滑块，其中不包含'视频'标签中的控件。我正在使用自定义播放按钮来启动视频。但是，一旦视频开始播放，我正在淡出我的自定义播放按钮，并希望标准的html5视频控制接管。只有在播放视频时，是否有方法将控件追加到html5视频中。任何帮助深表感谢。如何添加HTML5动态视频控件

你可以尝试阅读一些教程，你告诉你得到了什么？我很确定有很多教程只是搜索谷歌 – morha13 2015-03-13 16:33:44

我找到的所有教程都是关于创建自定义HTML5视频控件。这很好，最有帮助，但我一直没能找到任何东西来告诉我如何启动默认控件 – JordanBarber 2015-03-13 16:43:44

没关系，我找到了。谢谢你让我更深入 – JordanBarber 2015-03-13 16:44:58

答

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

Geez，谢谢！完美的作品 – JordanBarber 2015-03-13 16:48:10

答

你会想利用'playing' listener event。

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

当playing听众火灾，你可以检查，看看是否控件已被添加。如果它们不存在，则会看到本机controls属性。

如何添加HTML5动态视频控件

相关推荐