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

luck

5年前

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

videoタグの自動再生の動きが統一されていないので、悩むポイントになります。例えば、PCやスマホで違ったり、ミュートのON/OFFで違ったり等です。これらに関して限定的ではありまｓぐあ、調べましたので表にまとめておきます。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タグの自動再生属性について調べた結果は↓こちらをご覧ください。

実験！videoタグの自動再生やjavascriptを使っての再生ってできるの？できないの？｜ LUCKLOG
https://lucklog.info/javascript-video-auto-play/
videoタグをjavascriptで動かすときの制限を覚えられません。毎回、パソコンだと基本的に再生も自動再生もできて、スマホだと音なしであれば自動再生できて…、でもできないのもあってと、いつも悩んでしまいます。と …

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

実験パート２！videoタグの自動再生やjavascriptを使っての再生ってできるの？できないの？｜ LUCKLOG
https://lucklog.info/javascript-video-auto-play2/
前回 video タグに関しては下記の3点を調べました。 ※Windows10・iPhoneのブラウザが対象（Android・MACは調査できていません…） videoタグで通常再生できるかどうか？ videoタグで自動 …