【videoタグ】再生・自動再生・javascriptで再生・自動再生がどんなときできるかの表(Windows10・iPhone)

ホームページに動画を埋め込むことがあります。Youtubeで埋め込んだりvimeoで埋め込んだり、videoタグで埋め込んだり様々です。
今回はvideoタグで埋め込んだ場合の動きについてまとめます。

videoタグの自動再生の動きが統一されていないので、悩むポイントになります。例えば、PCやスマホで違ったり、ミュートのON/OFFで違ったり等です。これらに関して限定的ではありまsぐあ、調べましたので表にまとめておきます。Windows10、iPhoneになります。

まとめ

OSのバージョン

・Windows10
・iOS12.4
表内ではそれぞれWin、iOSと表記します。

ブラウザのバージョン

IE11
Edge44
Firefox(最新)
Chrome(最新)
safari12
表内ではそれぞれIE、Edge、Firefox、Chrome、safariと表記します。

ミュート
ON・・・音なし
JSでON・・・音なし(javascriptでONにする)
OFF・・・音ありという意味です。

OS ブラウザ ミュート 再生 自動再生 JSで再生 JSで自動再生
Win IE OFF
Win Edge OFF
Win Firefox OFF × ×
Win Chrome OFF × ×
iOS safari OFF × ×
iOS Chrome OFF × ×
Win IE ON
Win Edge ON
Win Firefox ON ×
Win Chrome ON ×
iOS safari ON × ×
iOS Chrome ON × ×
Win IE JSでON
Win Edge JSでON
Win Firefox JSでON × ×
Win Chrome JSでON × ×
iOS safari JSでON × ×
iOS Chrome JSでON × ×

調査を実施した結果をまとめた各ページ

通常再生やクリックイベントからjavascriptでの再生、videoタグの自動再生属性について調べた結果は↓こちらをご覧ください。

ページ読み込み時にjavascriptで再生&ミュートにした上で再生について調べた結果は↓こちらをご覧ください。