優れたソフトウェアと実用的なチュートリアル
iOS携帯電話で自動再生を実現するには問題ありません。 ミュート 属性が自動再生、サイレントモードをオンにしました。アンドロイド一部の携帯電話には再生開始ボタンがあり、クリックして再生できますが、再生ボタンがなく動画を再生できない携帯電話もあります。解決策の1つは、 ミュート プロパティ（ミュート）ですが、結果はサウンドはありますが再生プロセスはありません。
PCとAndroidはhls.jsを使用して、hlsストリームの自動再生とフルスクリーンおよび非フルスクリーン再生を実現します。
最初に使用されたhls.jsプラグイン、PCとAndroidデバイスで自動的に再生され、フルスクリーンと非全画面再生。
ただし、Appleのスマートフォンでの再生には対応していません。HLSの公式サイトによると、このライブラリはMSEを使用しているとのことです。 HTML5ビデオ そして MediaSource拡張機能 再生用です。MSEはiOSをサポートしていないようです。mdnのスクリーンショットは以下の通りです。
まとめ：PCとAndroidはどちらもhls.jsをサポートしていますが、iPhoneはサポートしていません。幸いなことに、videoタグはhls再生をサポートしていることがわかりました。
調査: Apple の携帯電話はビデオを使用して HLS ストリームの自動再生を実現します。
テスト後、再生するには再生ボタンをクリックする必要があり、自動再生ができません。原因は以下のとおりです（新しい):
翻訳+テストは次のとおりです。
自動再生するには、次の条件を満たす必要があります。
1.
2.
3.
4. 要素をインラインで再生し、再生を開始したときに自動的に全画面モードにならないようにします。つまり、playsinline webkit-playsinline です。
自動再生がすでに進行中の場合、次のいずれかの状況が発生すると自動再生が一時停止されます。
1. ビューポートの外側にスクロールするなどして、要素が見えなくなります。
2.
テスト後、ビデオには次のプロパティがあり、自動的に再生できます。
要約：自動再生を有効にするには、autoplay muted playsinline="true" webkit-playsinline="true" 属性を使用します。最も致命的な点は、自動再生時に無音になることです。
妥協点：Appleの携帯電話は自動的にホールドする必要はなく、フルスクリーンと非フルスクリーンで再生する必要がある
コードを autoplay playsinline="true" webkit-playsinline="true" controls に変更します。クリックすると再生されます（全画面表示が自動的にポップアップ表示されます）。iOS 13では、ダブルフィンガーリトラクトでインライン再生が可能です。iOS 13より前のバージョンでは、リトラクトは即座に一時停止され、再度クリックすると全画面表示に戻ります。
検索した結果、コードは次のように変更されました。
x-webkit-airplay="allow" は必須です。この属性により、このビデオはiOSのAirPlay機能に対応します。ただし、このコードを追加するとiOS 13以下ではインライン再生が可能になりますが、削除すると再生できなくなります。x5-playsinline はWeChatでの全画面再生を禁止します。
要約:
1. PC と Android はどちらも hls.js をサポートしていますが、Apple のスマートフォンはサポートしていません。
2. AppleのスマートフォンはHLSストリームの動画再生に使用できます。自動再生ミュート（playsinline="true" webkit-playsinline="true"）属性を使用すると、自動再生が可能です。さらに致命的な問題は、自動再生中に音声が出ないことです。
3. IOS13 未満でインライン再生するには、x-webkit-airplay="allow" を追加する必要があります。
