web-dev-qa-db-ja.com

モバイルブラウザでのHTML5ビデオの自動再生

次のHTML5およびJQueryコードを使用して、URLが配列URLArray []にあるビデオのプレイリストを再生しています。

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

HTML5の自動再生機能はすべての携帯電話で無効になっていることがわかっているため、その結果、携帯電話で各ビデオクリップを手動で再生する必要があります。これは間違いなく私が望んでいないものです。

私は本当にこれに代わるものを知りたいです。ユーザーが対話することなく自動再生のようにするために含めることができるコードセグメントに本当に興味があります。

これをAndroidアプリに変換して動作させることは可能ですか。実際にプレイリストのように動作させる必要があります。

助けてください。

jqueryhtml5html5-video
27
SotonJ

IOS 10のリリース以来Appleはミュートされたビデオの自動再生を許可しました： https://webkit.org/blog/6784/new-video-policies-for-ios/ =

Chrome 53 on Androidミュートされたビデオの自動再生も許可： https://developers.google.com/web/updates/2016/07/autoplay

36
Rihards

更新-2017年1月：この答えはまだ私に代表を呼んでいるので、これを読んでいる人にはRihardsから答えをチェックして、それを愛することを強くお勧めします。 Rihardsのリファレンスはこの回答よりも現代的であり、ブラウザで自動再生が必要な場合に役立ちます。

モバイルブラウザの自動再生制限は、OS開発者によって意図的に課された制限です。私の知る限り、コンテンツの再生をトリガーするために必要なイベントはOS/Phoneイベントであり、ブラウザー自体が制御または対話することはできないため、モバイルブラウザーでコンテンツを自動再生する方法はまったくありません。

Facebookは広告の武器庫にビデオ自動再生機能を実装しましたが、これはネイティブアプリを介した場合のみです。強力なFBでさえ、その意思を電話の神々の力に委ねなければなりません。

この新しいFB広告表示テクニックに関する記事を1つ見つけました。コメントセクションの一部のユーザーは、ネイティブFBアプリでできるようにブラウザーで自動再生を無効にする方法について不平を言っていました。

Facebookがすべてのモバイルユーザーの自動再生ビデオをNewsFeedに追加

しかし、FBがその機能を完全に起動する前にコメントが作成されたため、これは明らかに仮想的な苦情と冗談です。

私の結論：絶対に自動再生が必要な場合は、「ネイティブ」に移動する必要があります（ハ...私がそこでしたことを参照してください？） 。

35
Ryan McCoy

On Mobile Chromeデータ保存オプションを有効にしました。デフォルトではミュートされた動画の自動再生を無効にします。この場合、GIFは部分的な低品質+高帯域ソリューションです。

2
DavidTaubmann

IOS 11で動画を自動再生するときに問題が発生しました。AndroidおよびiOS 10.3は、PointiとRihardsが提供するソリューションと同等のソリューションで正常に動作しました。

IOS 11のMobile Safariは、もう少し歌姫のようです。プレフィックス付きの属性（webkit-playsinline）も必ず追加してください。

<video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

このソリューションは、人気のあるすべてのデスクトップブラウザーとAndroid ChromeおよびiOS 10/11 Safari/Chrome。ほとんどのインラインブラウザーでも動作します。たとえば、Facebook-App（iOS 11でテスト済み）のように。

これを見つけるのに何時間もかかるので、少なくともあなたにとって助けになればと思います。

2
Malte Peters

このトピックで見つかったほぼすべての回答で私にとって欠けていたのは、モバイルブラウザでplaysinline属性が適切に機能する必要があることです（フルスクリーンを再生せず、代わりにウェブサイトのコンテンツに埋め込みます）

したがって、私の完全な例は次のようになります。

<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>
2
Pointi