html5中controls是什么意思

119 阅读 0 评论 79 点赞

我是靠谱客的博主喜悦唇膏，这篇文章主要介绍html5中controls是什么意思，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

在html5中，controls的意思为“控制”。

controls是audio和video标签的一个属性。

controls 属性规定浏览器应该为视频或音频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）

说明：

在 XHTML 中, 该属性是不允许简写的， controls 属性必须定义为 <audio controls="controls">。

但在HTML5 中，该属性的属性值可以省略，直接可<audio controls>。

示例1：

复制代码<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
</body>
</html>
登录后复制

示例2：

复制代码<audio>
  <source src="horse.ogg"  type="audio/ogg">
  <source src="horse.mp3"  type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>1
2
3
4
5
<audio>
  <source src="horse.ogg"  type="audio/ogg">
  <source src="horse.mp3"  type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
登录后复制

复制代码<audio controls>
  <source src="horse.ogg"  type="audio/ogg">
  <source src="horse.mp3"  type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>1
2
3
4
5
<audio controls>
  <source src="horse.ogg"  type="audio/ogg">
  <source src="horse.mp3"  type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
登录后复制