videoタグで自動再生するときの注意点

videoタグを直接HTMLに設置する場合

基本の形はこれ。

<video src="example.mp4" poster="example1.jpg" muted autoplay playsinline loop></video>

• autoplay：自動再生用
• muted：これがないと自動再生しない
• playsinline：iphone safariはこれがないと自動再生しない

loopやposterは必須ではない。
preloadはデフォルトONなので、指定しなくてもOK。

javascriptからvideoタグを設置する場合

2つほど注意点がある。

• mutedではなく、muted="muted"にする。
• createElementではなくinnerHTMLを使う。

<video src="example.mp4" poster="example1.jpg" muted="muted" autoplay playsinline loop></video>

muted="muted"の理由

chromeやfirefoxだけの現象だが、mutedだけだと、Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.とエラーが出てしまう。
javascriptだと少しだけ仕様が違うのか厳格なのか分からないが、autoplayポリシーに引っかかって自動再生しなくなるようだ。
ページ遷移のときは問題ないが、リロード時やURL直打ちだとmutedでは自動再生しない。

innerHTMLの理由

document.createElement('video')で追加しても自動再生されない
これもchromeやfirefoxだけの現象だが、上記のタグをcreateElementして属性を付与して、HTML側に追加しても、リロード時やURL直打ちだと再生されない。