通过jQuery为

2 次阅读

HTML5中的标签为网页提供了原生的视频播放能力，但默认情况下，视频元素并不会自动显示播放、暂停、音量调节、全屏等控制按钮。如果希望用户能够直接操作视频播放器，通常需要为标签添加controls属性。

在实际项目开发中，很多页面的视频元素可能是动态生成的，或者需要根据用户操作决定是否显示控制栏。这时，通过jQuery动态添加controls属性是一种灵活且常见的实现方式。

video标签controls属性的作用

controls是HTML5 video元素中的布尔属性，用于开启浏览器自带的视频控制面板。

例如：

添加controls后，浏览器会自动显示视频控制组件，包括：

  • 播放与暂停按钮

  • 视频进度条

  • 音量控制

  • 全屏按钮

  • 播放时间显示

不同浏览器提供的控制界面可能有所差异，但核心功能基本一致。

如果没有添加controls属性：

用户通常只能通过JavaScript控制视频播放，无法直接操作播放器。

使用jQuery动态添加controls属性

jQuery提供了简单的属性操作方法，可以使用attr()函数为video元素添加controls属性。

示例代码：

页面加载完成后，jQuery会找到id为myVideo的视频元素，并动态添加controls属性。

最终效果等同于：

这种方式适用于需要根据条件动态开启播放器控制功能的场景。

使用prop方法添加controls属性

对于HTML中的布尔类型属性，jQuery官方更推荐使用prop()方法。

例如：

$("#myVideo").prop("controls", true);

执行后，video元素会开启控制栏。

相比attr()，prop()直接操作DOM对象属性，更符合HTML5元素属性的处理方式。

完整示例：

运行后，视频播放器会立即显示控制按钮。

根据条件动态控制controls显示

开发过程中，经常需要根据用户身份、页面状态或交互行为决定是否显示视频控制栏。

例如，点击按钮显示控制功能：



显示控制栏

点击按钮后，视频播放器会增加控制面板。

同理，如果需要隐藏控制栏，可以设置：

$("#videoBox").prop("controls", false);

或者：

$("#videoBox").removeAttr("controls");

页面加载后批量添加controls属性

如果页面中存在多个视频元素，可以通过jQuery选择器批量处理。

示例：

$("video").prop("controls", true);

该代码会为页面所有标签开启控制栏。

适用于新闻网站、视频网站后台管理系统等包含大量视频内容的页面。

动态创建video元素时添加controls

有些项目中的视频标签并不是提前写在HTML中，而是通过JavaScript动态生成。

例如：

var video = $("");

video.attr("src", "movie.mp4");
video.prop("controls", true);

$("body").append(video);

这样创建出来的视频元素同样具备完整控制功能。

attr与prop的区别

虽然attr()和prop()都可以操作video的controls属性，但二者存在一定区别。

attr()主要用于操作HTML标签属性：

$("#video").attr("controls", "controls");

它会修改元素的HTML属性。

prop()主要用于操作DOM对象属性：

$("#video").prop("controls", true);

它直接改变浏览器当前对元素状态的判断。

由于controls属于布尔类型属性，因此在现代jQuery开发中，更推荐使用prop()方式。

常见问题及解决方法

添加controls后没有显示控制栏

如果执行代码后没有看到控制按钮，可以检查以下内容：

  1. 确认选择器是否正确。

例如：

$("#myVideo")

需要确保页面中存在：

  1. 检查jQuery是否成功加载。

可以在控制台执行：

console.log($);

确认jQuery对象是否存在。

  1. 确认代码执行时机。

如果video元素还没有加载完成，可能无法找到目标元素。

推荐写法：

$(document).ready(function(){
    $("video").prop("controls", true);
文章标签
HTML5视频 jQuery video标签 controls属性 前端开发