Video don' t start playing but instead throw DOMException

Question

I have just created video object on fly, then add 2 attributes such as source and muted before appending the video object in the document and finally use method play() to play the added video as illustrated below.

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?

So can someone can tell me What is wrong or solve this for me.

NB:one image of the video is displayed but it is not running..

Answer 1

by default, not just in Chrome but also in Mozilla Firefox and other browsers the video autoplay command is being denied if the Video contains audio and is not muted. The only way around it is a javascript forced autoplay with audio. However if you set the video tag to muted="muted" and autoplay the video will still autoplay even if you have set your browser to not to autoplay videos onload.

Answer 2

It's a new feature that has been added to Google Chrome - media (eg videos and sounds) cannot be played before the user interacts actively with the page (click). Just add a created variable, put all your code inside a click handler, and create the video if created is false , and set created to 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)});
    }
});

Answer 3

This may seem obvious, however, make sure you don't have an extension installed that is preventing the video from playing. In my case, a site I recently completed has been working fine. I went back to take a look at the site and got this error message: VM476:96 Uncaught (in promise) DOMException: The play method is not allowed by the user agent.

Within a few minutes, I realized I recently installed AutoplayStopper which of course was preventing the video from running auto play.

Answer 4

This is because of your browser default settings. It has set not to play any Audio or video. Firefox: https://support.mozilla.org/en-US/kb/block-autoplay