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

Question

我正在尝试通过 Javascript 插入 HTML5 <video> 元素，但它无法自动播放，尽管它被静音。

背景语境

我想将我所有的 gif 资产转换为 mp4 格式。同样，我希望 HTML video 模拟 gif。它应该包括以下属性：

静音
网页加载后立即自动播放
无限循环
排队播放

我目前在 Chrome 100。

我尝试过的

持有相关代码within this 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 属性并可以播放，则视频为 auto-played，可以通过 canplay 事件侦听器进行检查。

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

有了这个，您可以忽略初始设置 autoplay 和 muted 属性。

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>

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

Muted video fails to autoplay when inserted into HTML via Javascript

html

javascript

video

html5-video

背景语境

我尝试过的