videoタグを使うとき、自動再生についていつも調べ直してしまいます。
スマホだと自動再生はできなくて、パソコンだとブラウザによって違いがあって、ミュートであれば自動再生可能…、などいつもどうだったか悩んでしまいます。
ということで今回試してみて記録しておこうと思います。
※私が持っている実機（windows10、iPhone）でチェックしてみます
javascriptでの再生ソース
「動画を再生する」ボタン
playメソッドを使って再生させています。
詳細は下記のような内容ですが、playメソッドで動かしているということだけ分かればOKです。
ボタンに「play」というクラスと「data-id」を指定しています。data-idにはidが入っていてどのvideoタグの再生を行うか指定しています。
jQuery(document).ready(function($){
$('.play').on('click', function() {
// 「動作を再生する」ボタンがクリックされた
var id = $(this).data('id'); // どのvideoタグか
$('#'+id).get(0).play(); // 再生する
});
});
再生・自動再生に関しての結果（まとめ）
通常再生とjavascriptでの再生はパソコン（windows10）でもiPhoneでもすべて正常に動作しました。
※通常再生：再生ボタンをクリックして再生
自動再生に関しては、パソコン（windows10）のIE、EdgeはミュートのON/OFFに関わらず自動再生されました。Chrome、Firefoxの場合はミュートがON（音なし）であれば自動再生され、ミュートがOFF（音あり）の場合は自動再生されませんでした。
ページを開いただけで自動再生されると訪問者の意思を無視して音がなってしまう可能性があるためです。
記事を読んでくれる人の迷惑になってしまい、せっかく来てくれたのにすぐに立ち去ってしまいます。
特に仕事中にページを開いただけで音声が出てしまったりすると、とても困りますよね。
スマホの場合は、ミュートのON/OFFに関わらず自動再生されませんでした。
スマホの場合は通信環境の問題もありますので、余計に制限が厳しいのかなと思います。
また、動画再生はスマホ画面全体を利用することが多く、アプリ（youtubeなど）が開かれることも多いので、自動再生されないようになっているのかもしれません。
「videoタグを設置しての実験」にて調べて結果の表をまとめて並べておきます。
▼ autoplayなし＆mutedなし（自動再生しない＆音あり）
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | ー | 〇 | 〇 |
| Win10 | Edge44 | ー | 〇 | 〇 |
| Win10 | Firefox | ー | 〇 | 〇 |
| Win10 | Chrome | ー | 〇 | 〇 |
| iOS12.4 | safari12 | ー | 〇 | 〇 |
| iOS12.4 | Chrome | ー | 〇 | 〇 |
▼ autoplayあり＆mutedなし（自動再生する＆音あり）
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | 〇 | 〇 | 〇 |
| Win10 | Edge44 | 〇 | 〇 | 〇 |
| Win10 | Firefox | × | 〇 | 〇 |
| Win10 | Chrome | × | 〇 | 〇 |
| iOS12.4 | safari12 | × | 〇 | 〇 |
| iOS12.4 | Chrome | × | 〇 | 〇 |
▼ autoplayあり＆mutedあり（自動再生する＆音なし）
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | 〇 | 〇 | 〇 |
| Win10 | Edge44 | 〇 | 〇 | 〇 |
| Win10 | Firefox | 〇 | 〇 | 〇 |
| Win10 | Chrome | 〇 | 〇 | 〇 |
| iOS12.4 | safari12 | × | 〇 | 〇 |
| iOS12.4 | Chrome | × | 〇 | 〇 |
※Chrome、Firefoxは最新
videoタグを設置しての実験
下記の設定で各ブラウザ（IE11、Edge、Firefox、Chrome）およびスマホ端末（iPhone）でチェックしてみました。
通常
autoplay、mutedの設定なしのvideoタグを設置しました（自動再生しない＆音あり）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。
※結果は動画の下をご覧ください
動画を再生する
私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | ー | 〇 | 〇 |
| Win10 | Edge44 | ー | 〇 | 〇 |
| Win10 | Firefox | ー | 〇 | 〇 |
| Win10 | Chrome | ー | 〇 | 〇 |
| iOS12.4 | safari12 | ー | 〇 | 〇 |
| iOS12.4 | Chrome | ー | 〇 | 〇 |
※Chrome、Firefoxは最新
自動再生
autoplayの設定あり、mutedの設定なしのvideoタグを設置しました（自動再生あり＆音あり）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。
動画を再生する
私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。
また、自動再生に関しては、IEとEdgeが自動再生されました。その他は自動再生されませんでした。
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | 〇 | 〇 | 〇 |
| Win10 | Edge44 | 〇 | 〇 | 〇 |
| Win10 | Firefox | × | 〇 | 〇 |
| Win10 | Chrome | × | 〇 | 〇 |
| iOS12.4 | safari12 | × | 〇 | 〇 |
| iOS12.4 | Chrome | × | 〇 | 〇 |
※Chrome、Firefoxは最新
自動再生（ミュートON※音無し）
autoplay、mutedの設定ありのvideoタグを設置しました（自動再生あり＆音なし）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。
動画を再生する
私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。
また、自動再生に関しては、パソコン（windows10）ではすべて自動再生されましたが、iPhoneでは自動再生されませんでした。
| OS | ブラウザ | 自動再生 | 通常再生 | JSで再生 |
|---|---|---|---|---|
| Win10 | IE11 | 〇 | 〇 | 〇 |
| Win10 | Edge44 | 〇 | 〇 | 〇 |
| Win10 | Firefox | 〇 | 〇 | 〇 |
| Win10 | Chrome | 〇 | 〇 | 〇 |
| iOS12.4 | safari12 | × | 〇 | 〇 |
| iOS12.4 | Chrome | × | 〇 | 〇 |
※Chrome、Firefoxは最新
関連ページ
ページ読み込み時にjavascriptで再生&ミュートにした上で再生について調べた結果は↓こちらをご覧ください。
2つの調査結果をまとめました。
スポンサーリンク