Video autoplay 属性

Video 对象参考手册 Video 对象

查看是否在准备就绪后就开始播放视频：

<video id="myVideo" width="320" height="240" controls autoplay>
  <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").autoplay;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

定义和用法

autoplay 属性设置或返回音视频是否在加载后即开始播放。

该属性反映了 HTML <video> autoplay 属性。

当存在时，它指定在视频一旦加载后视频会自动开始播放 。

注意： The <video> element is new in HTML5.

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

语法

返回 autoplay 属性：

videoObject.autoplay

设置 autoplay 属性：

videoObject.autoplay = true | false

属性值

值 描述
true|false 描述了在页面加载后就自动播放
  • true - 指示音视频在加载完成后随即播放。
  • false - 默认。指示音视频不应在加载后立即播放。

技术细节

返回值： 布尔值。如果视频开始播放返回 true，否则返回 false
默认值: false

更多实例

禁用自动播放，并重新载入视频： 

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

  <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><br>
  <button onclick="enableAutoplay()" type="button">启用自动播放</button>
  <button onclick="disableAutoplay()" type="button">禁用自动播放</button>
  <button onclick="checkAutoplay()" type="button">查看自动播放状态</button>
  <script>
    var x = document.getElementById("myVideo");

    function enableAutoplay() {
      x.autoplay = true;
      x.load();
    }

    function disableAutoplay() {
      x.autoplay = false;
      x.load();
    }

    function checkAutoplay() {
      alert(x.autoplay);
    }
  </script>

</body>
</html>

尝试一下 »


以下实例演示了如何创建 <video> 元素并设置 autoplay 属性：

<p>点击按钮创建 VIDEO 元素，一个设置 autoplay 属性为 true, 另一个设置 autoplay 属性为 false。</p>
<button onclick="myFunction(true)">Video 使用自动播放</button>
<button onclick="myFunction(false)">Video 不使用自动播放</button>
<br>
<script>
  function myFunction(p) {
    var x = document.createElement("VIDEO");
    x.setAttribute("id", "myVideo");
    x.setAttribute("controls", "controls");
    var y = document.createElement("SOURCE");
    y.setAttribute("src", "/examples/movie.mp4");
    y.setAttribute("type", "video/mp4");
    x.appendChild(y);
    var z = document.createElement("SOURCE");
    z.setAttribute("src", "/examples/movie.ogg");
    z.setAttribute("type", "video/ogg");
    x.appendChild(z);
    // 设置播放属性:
    x.autoplay = p;
    document.body.appendChild(x);
  }
</script>

尝试一下 »

相关页面

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

Video 对象参考手册 Video 对象