我有一个视频（出于背景目的），该视频已静音，我打算自动播放。如果我将以下代码放入html文件中：
<video playsinline autoplay muted loop>
<source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>
在Chrome上运行正常。
但是，如果我要使用DOM操作插入完全相同的视频，那么我在Chrome上会遇到麻烦，但在其他浏览器（如Firefox）中会获得成功。
<html>
<body>
</body>
<script>
function render() {
const video = document.createElement('video');
video.setAttribute('muted', true);
video.setAttribute('autoplay', true);
video.setAttribute('loop', true);
video.setAttribute('playsinline', true);
const source = document.createElement('source');
source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4');
video.appendChild(source);
document.body.appendChild(video);
}
render();
</script>
</html>
Chrome appears notorious for blocking autoplay。通用的解决方案要么被静音（我已经做过），要么使用dom操纵来调用播放（不起作用）。将视频插入dom后，是否有办法使它起作用。我关心的原因是因为我的实际网站要求呈现所有内容（我的网站在ember.js中）。
这是Chrome 71版。
谢谢！
答案 0 :(得分：2)
这可能是一个错误（不是唯一使用此自动播放策略的错误...）。
当您通过muted设置Element.setAttribute()属性时，该策略并不会像应有的那样释放。
要解决此问题，请通过Element的属性设置IDL属性：
function render() {
const video = document.createElement('video');
video.muted = true;
video.autoplay = true;
video.loop = true;
video.setAttribute('playsinline', true);
const source = document.createElement('source');
source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4');
video.appendChild(source);
document.body.appendChild(video);
}
render();
As a fiddle，因为始终需要允许父页面上需要click事件的StackSnippets自动播放;-）。
答案 1 :(得分：0)
几个月前找到这个article之后，我仍然无法获得一致的自动播放行为，无论是静音还是其他方式。因此，我唯一没有尝试过的方法就是将async function包装在 IIFE （ I 我调用了 F 连接 E 表情）。
在演示中：
它应该autoplay
应为 未静音
以上所有内容都应该在没有用户交互的情况下发生。
var clip = document.getElementById('clip');
(function() {
playMedia();
})();
async function playMedia() {
try {
await stamp();
await clip.play();
} catch (err) {
}
}
function stamp() {
document.body.insertAdjacentHTML('beforeend', `<video id='clip' poster='https://image.ibb.co/iD44vf/e2517.jpg' src='https://storage04.dropshots.com/photos8000/photos/1381926/20181019/182332.mp4' width='100%' autoplay loop playsinline></video>`);
}