当通过JavaScript插入HTML时，静音视频无法自动播放

Question

我正在尝试通过JavaScript插入HTML5 ＆lt;元素，但是尽管它是 muted ，但它仍未自动播放。

背景上下文

我想将所有GIF资产转移到MP4格式。同样，我想让HTML 视频模仿GIF。它应该包括以下属性：

• 网页
• 加载
• 循环无限期地
• 播放

我目前在Chrome 100中

。

一旦 t123278/pen/exoqxyb？editors = 1111“ rel =“ nofollow noreferrer”>此codepen 。我想通过JavaScript动态添加HTML视频。但是，即使指定了自动播放和静态属性，这也无法自动播放。

但是，如果我的视频元素具有直接在HTML中写入相同属性的视频元素，则自动播放功能效果很好。

---

如何使用JS 和将视频插入自动播放？

Answer 1

我认为您宁愿设置这样的属性：

const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
anchor.appendChild(vid);
vid.autoplay = true;
vid.loop = true;
vid.muted = true;
vid.playsinline = true;
vid.src = 'https://www.w3schools.com/html/mov_bbb.mp4';

尝试进行这些修改。如果它仍然不起作用，则可以在上述代码之后添加此内联：

vid.play()

Answer 2

看来Chrome在媒体加载之前忽略了muted属性集。如果加载媒体并可以播放muted属性，则可以自动播放视频，可以使用canplay event侦听器检查。

vid.oncanplay = () => {
    vid.muted = true;
    vid.play();
}

这样，您可以忽略设置自动播放和最初的属性属性。

const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
vid.setAttribute('loop', '');
vid.setAttribute('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
vid.oncanplay = () => {
    vid.muted = true;
    vid.play();
}
anchor.appendChild(vid);

body {
  background-color: black;
  color: white;
}

<div id="anchor"></div>