実験！videoタグの自動再生やjavascriptを使っての再生ってできるの？できないの？

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に関わらず自動再生されませんでした。

「videoタグを設置しての実験」にて調べて結果の表をまとめて並べておきます。

▼ autoplayなし＆mutedなし（自動再生しない＆音あり）

▼ autoplayあり＆mutedなし（自動再生する＆音あり）

▼ autoplayあり＆mutedあり（自動再生する＆音なし）

※Chrome、Firefoxは最新

videoタグを設置しての実験

下記の設定で各ブラウザ（IE11、Edge、Firefox、Chrome）およびスマホ端末（iPhone）でチェックしてみました。

通常

autoplay、mutedの設定なしのvideoタグを設置しました（自動再生しない＆音あり）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。
※結果は動画の下をご覧ください

動画を再生する

私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。

※Chrome、Firefoxは最新

自動再生

autoplayの設定あり、mutedの設定なしのvideoタグを設置しました（自動再生あり＆音あり）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。

動画を再生する

私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。
また、自動再生に関しては、IEとEdgeが自動再生されました。その他は自動再生されませんでした。

※Chrome、Firefoxは最新

自動再生（ミュートON※音無し）

autoplay、mutedの設定ありのvideoタグを設置しました（自動再生あり＆音なし）。
クリックすると再生するボタンを動画下に置いています（javascriptで再生する）。

動画を再生する

私が試せるものに限定されますが、すべての環境で「通常再生」「javascriptでの再生」どちらも正常に動作しました。
また、自動再生に関しては、パソコン（windows10）ではすべて自動再生されましたが、iPhoneでは自動再生されませんでした。

※Chrome、Firefoxは最新

関連ページ

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

2つの調査結果をまとめました。

スポンサーリンク