视频不会开始播放，而是抛出DOMException

Question

我刚刚创建了视频对象，然后在文档中附加视频对象之前添加了2个属性，如source和muted，最后使用方法play（）播放添加的视频，如下图所示。

let v = document.createElement("video");
v.setAttribute("src","videoplayback.mp4");
v.setAttribute("muted","muted");

document.body.appendChild(v);
v.play().catch((e)=>{ console.log(e)});  // it returns DomException why?

那么有人可以告诉我有什么问题或者为我解决这个问题。

注意：显示视频的一个图像但它没有运行..

Answer 1

这是Google Chrome中添加的新功能 - 在用户主动与页面交互（点击）之前，无法播放媒体（例如视频和声音）。只需添加一个created变量，将所有代码放在click处理程序中，如果created是false，则创建视频，并将created设置为true：

let created = false;
$(document).on("click", () => {
    if (!created) {
        created = true;
        let v = document.createElement("video");
        v.setAttribute("src","videoplayback.mp4");
        v.setAttribute("muted","muted");
        document.body.appendChild(v);
        v.play().catch((e)=>{ console.log(e)});
    }
});