Video controls 属性

Video 对象参考手册 Video 对象

启用视频控件：

<video id="myVideo" width="320" height="240">
  <source src="/examples/movie.mp4" type="video/mp4">
    <source src="/examples/movie.ogg" type="video/ogg">
   您的浏览器不支持 video 标签。
</video>
<p>点击按钮添加视频控件。.</p>
<p><strong>注意：</strong> 在 Internet Explorer 浏览器中, 你必须移动鼠标到视频上才能看到控件。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    document.getElementById("myVideo").controls = true;
  }
</script>

尝试一下 »

定义和用法

controls 属性设置或返回浏览器应当显示标准的视频控件。

该属性反映了<video> controls 属性。

当使用该属性时，它指定了显示视频控件。

视频控件包含：

  • 播放
  • 暂停
  • 进度条
  • 音量
  • 全屏切换（供视频）
  • 字幕（当可用时）
  • 轨道（当可用时）

注意： <video> 元素是 HTML5 新增的。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 controls 属性

注意： Internet Explorer 8 及更早IE版本不支持 <video> 元素。

语法

返回 controls 属性：

videoObject.controls

设置 controls 属性：

videoObject.controls = true | false

属性值

值 描述
true|false 描述了是否显示视频控件：
  • true - 指定显示控件
  • false - 默认。指定不显示控件

技术细节

返回值： 布尔值，如果显示视频控件返回 true，否则返回 false。
默认值: false

更多实例

查看视频控件是否显示:

<video id="myVideo" width="320" height="240" controls>
  <source src="/examples/movie.mp4" type="video/mp4">
    <source src="/examples/movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
<p>点击按钮查看视频控件是否显示。</p>
<p id="demo"></p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    var x = document.getElementById("myVideo").controls;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »


启用，禁用及检测控件状态：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body>

  <video id="myVideo" width="320" height="240">
  <source src="/examples/movie.mp4" type="video/mp4">
    <source src="/examples/movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video><br>
  <button onclick="enableControls()" type="button">启用控件</button>
  <button onclick="disableControls()" type="button">禁用控件</button>
  <button onclick="checkControls()" type="button">查看控件状态</button>
  <script>
    var x = document.getElementById("myVideo");

    function enableControls() {
      x.controls = true;
      x.load();
    }

    function disableControls() {
      x.controls = false;
      x.load();
    }

    function checkControls() {
      alert(x.controls);
    }
  </script>

</body>
</html>

尝试一下 »

相关页面

HTML 参考手册: HTML <video> controls 属性

Video 对象参考手册 Video 对象