如何通过jQuery实现在点击时为HTML5视频添加/移除controls属性？

你只需要修改JS脚本，针对当前被点击的视频元素单独切换controls属性即可，避免误操作所有视频元素。修改后的代码如下：

jQuery(document).ready(function($) {
    $('.myHTMLvideo').click(function() {
        // 切换播放/暂停状态
        this.paused ? this.play() : this.pause();
        // 切换当前视频的controls显示状态
        this.controls = !this.controls;
    });
});

代码说明 #

• 点击事件里的this指向的是当前被点击的<video>元素，所以操作this.controls只会影响当前视频，不会触发所有视频都显示控件的问题。
• this.controls = !this.controls是简洁的布尔值切换写法：如果当前视频已显示控件，就移除；如果未显示，就添加。
• 初始状态下确保<video>标签不要加controls属性，保持默认无控件的简洁界面。

你的HTML结构无需修改，保持原样即可：

<div class="tile video">
 <video preload="auto" class="myHTMLvideo" poster="#">
 <source src="#" type="video/mp4">
 </video> 
</div>

内容的提问来源于stack exchange，提问作者Alix