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直打ちだと再生されない。