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

前回 video タグに関しては下記の3点を調べました。
※Windows10・iPhoneのブラウザが対象（Android・MACは調査できていません…）

1. videoタグで通常再生できるかどうか？
2. videoタグで自動再生できるかどうか？
3. javascript（クリックイベント）で再生できるかどうか？

それら以外に調べたいことがでてきましたので、今回はそれらを調査してみます。調べたい内容は下記２点です。

1. javascriptで自動再生できるかどうか？
2. javascriptでミュートに変更して、自動再生できるかどうか

javascriptでの自動再生ソース

javascriptで読み込み時再生＆muted（ミュート）なし
※videoタグに「video1」というクラスを指定しています

// 再生のみ（読み込み時）
$('.video1').get(0).play();

javascriptで読み込み時再生＆muted（ミュート）あり
※videoタグに「video2」というクラスを指定しています

// ミュートを設定し、再生
$('.video2').play();
$('.video2').get(0).play();

javascriptでmuted（ミュート）設定＆javascriptで読み込み時再生＆muted（ミュート）なし
※videoタグに「video3」というクラスを指定しています

// 再生のみ（読み込み時）
$('.video3').get(0).play();

javascriptでの自動再生に関しての結果（まとめ）

javascriptでの自動再生はミュートの設定有無に関わらずパソコン（windows10）でもiPhoneともに同じ結果となりました。

結果はパソコン（windows10）のIE11、Edgeはミュートの設定有無に関わらず自動再生できました。それ以外は自動再生できませんでした。

自動再生できない理由は下記から推測できました。Firefoxでの実行時エラーです。

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Firefoxエラーを引用。以下Google翻訳より引用

NotAllowedError：おそらくユーザーが権限を拒否したため、現在のコンテキストではユーザーエージェントまたはプラットフォームによって再生メソッドが許可されていません。

「ユーザによってplayは許可されませんでした」といった内容です。
”読み込み時”は再生ボタンやクリックイベントなどとは違い、ユーザの意思がないため許可されないのだと思います。たしかに、動画の再生は音声を伴ったり、通信量が多かったりと勝手に再生されると困ることが多いと思います。よって、それを考慮してある程度抑制する仕様なのでしょう。

「videoタグを設置しての実験」にて調べた結果をまとめておきます。
※全パターン同じ結果でした

▼ javascriptで読み込み時再生＆muted（ミュート）なし

▼ javascriptで読み込み時再生＆muted（ミュート）あり

▼ javascriptでmuted（ミュート）設定＆javascriptで読み込み時再生＆muted（ミュート）なし

※Chrome、Firefoxは最新

videoタグを設置しての実験

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

javascriptで自動再生（ミュートなし）

muted（ミュート） の設定なしのvideoタグを設置しました。
読み込み時にjavascript（jquery）のplayメソッドを実行して自動再生させています。
※結果は動画の下をご覧ください



私が試せるものに限定されますが、「javascriptでの再生」は、IEとEdgeが再生されました。その他は再生されませんでした。

※Chrome、Firefoxは最新
※ミュートOFFとは音ありのこと

javascriptで自動再生（ミュートあり）

muted（ミュート） の設定ありのvideoタグを設置しました。
読み込み時にjavascript（jquery）のplayメソッドを実行して自動再生させています。
※結果は動画の下をご覧ください

https://lucklog.info/wp/wp-content/uploads/2020/04/2b61d8aa34307c3927496a74dbd464c5.mp4

私が試せるものに限定されますが、「javascriptでの再生」は、IEとEdgeが再生されました。その他は再生されませんでした。

※Chrome、Firefoxは最新
※ミュートONとは音なしのこと

javascriptでミュートなし設定＆javascriptで自動再生

muted（ミュート） の設定なしのvideoタグを設置しました。
読み込み時にjavascript（jquery）でミュートにしてから、javascript（jquery）のplayメソッドを実行して自動再生させています。
※結果は動画の下をご覧ください

https://lucklog.info/wp/wp-content/uploads/2020/04/2b61d8aa34307c3927496a74dbd464c5.mp4

私が試せるものに限定されますが、「javascriptでの再生」は、IEとEdgeが再生されました。その他は再生されませんでした。

※Chrome、Firefoxは最新
※ミュートJSでONとは音ありの状態をjavascriptで音なしにするということ

関連ページ

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

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

スポンサーリンク