Видео не запускается, а вместо этого выкидывает 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)});
    }
});