如何在HTML5视频播放器中添加自动播放属性

Question

当特定的目标按钮被点击时，我想要为 <video></video> 元素添加一个 autoplay 属性。

HTML

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

我尝试使用jQuery：

$('.targetButton').on('click', function(){
  $('video').attr("autoplay"," ");
});

...但视频无法播放。我做错了什么？

- Daniel

---

我更新了你的问题，添加了当按钮被点击时你期望视频开始播放的内容，否则实际上并没有问题：你的代码成功地添加了属性。 - trincot

Answer 1

仅设置自动播放标志是不足以使视频播放，您应该在将自动播放设置为true之后立即调用load()方法，以便视频重新加载，然后播放，因为标志为true。

$('video').autoplay = true;
$('video').load();

但是，既然可以使用JS播放视频，为什么还要这样做呢？以下是使用jQuery实现的步骤：

$('video').play();

- user6549300

---

.play() 对我不起作用，但是你的第一个建议可以。 - Erica Stockwell-Alpert

Answer 2

试试这个

var video = document.querySelector("#video"),
  button = document.querySelector("button");


button.addEventListener("click", function() {
  video.play()
    //video.setAttribute("autoplay","autoplay")// this will set the attribute but will not play 
}, false);

<p>
  <button>playVideo</button>
</p>




<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="https://media.w3.org/2010/05/sintel/poster.png">

  <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    <source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="https://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">

        <p>Your user agent does not support the HTML5 Video element.</p>
</video>

- Gildas.Tambo

Answer 3

你可以使用JavaScript来启用该属性，但需要为视频元素添加ID：

HTML

<video id="myVideo" controls>
    ...
</video>

然后你可以获取元素并像这样设置属性：

JavaScript

document.getElementById("myVideo").autoplay = true;

- paas

Answer 4

为更好地处理您的视频，最好使用HTML视频标记：

<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <video
            id="myVideo"
            controls
          >
          <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        </video>
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

通过这个，你可以在 JavaScript 中使用 play 和 pause 事件：

  const myModalOpen = document.getElementById("exampleModal");
  exampleModal.addEventListener("shown.bs.modal", (event) => {
    console.log("Abierto y autoplay");
    const video = document.getElementById("myVideo");
    video.play();
  });

  const myModalClose = document.getElementById("exampleModal");
  exampleModal.addEventListener("hidden.bs.modal", (event) => {
    console.log("Cerrado y stop");
    const video = document.getElementById("myVideo");
    video.pause();
  });

有了这个，它就能工作了。

- Uriel Cisneros

Answer 5

使用视频控件：自动播放。

<video controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

你还可以包括以下内容：- 播放、暂停、快进/快退、音量、全屏切换、字幕（如果有）、轨道（如果有）

- Mahendra Kulkarni