HTML控件属性用于指定必须显示音频和视频控件。它是布尔属性,也是HTML5中的新函数。我们可以在两个标签<audio>和<video>中使用此属性
controls属性在<audio>标记上包含以下属性:
- Play
- Pause
- Seeking
- Volume
controls属性在<video>标记上包含以下属性:
- Play
- Pause
- Seeking
- Volume
- 全屏切换(仅适用于视频)
- 字幕/字幕(仅适用于视频)
- 跟踪(仅适用于视频)
用法:
<element controls>
下面的示例说明<audio>元素中控件属性的用法。
例:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Audio controls Attribute
</title>
</head>
<body style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2 style="font-family:Impact">
HTML Audio controls Attribute
</h2>
<br>
<audio id="Test_Audio" controls autoplay>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg"
type="audio/ogg">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3"
type="audio/mpeg">
</audio>
</body>
</html>
输出:
下面的示例说明<video>元素中控件属性的使用。
例:
<!DOCTYPE html>
<html>
<head>
<title>HTML video controls Attribute</title>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>HTML video controls Attribute</h3>
<video width="400" height="200" controls >
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
type="video/mp4">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
type="video/ogg">
</video>
</center>
</body>
</html>
输出:
支持的浏览器:下面列出了HTML控件“属性”支持的浏览器:
- 谷歌浏览器4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 4.0
- Opera 10.5
相关用法
- HTML <audio> controls属性用法及代码示例
- HTML <video> controls属性用法及代码示例
- HTML Video controls用法及代码示例
- HTML Audio controls用法及代码示例
- HTML <html> xmlns属性用法及代码示例
- HTML scoped属性用法及代码示例
- HTML <th> valign属性用法及代码示例
- HTML <col> align属性用法及代码示例
- HTML poster属性用法及代码示例
- HTML Class属性用法及代码示例
- HTML style属性用法及代码示例
- HTML oninvalid用法及代码示例
- HTML <select> autocomplete属性用法及代码示例
- HTML <table> bgcolor属性用法及代码示例
- HTML onsubmit用法及代码示例
- HTML onunload用法及代码示例
注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | controls Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。