記事ディレクトリ
Android側とh5ページのデバッグ側ではvideoタグ以下のmp4形式ファイルは再生できるのですが、iosではvideoタグ部分のmp4ファイルが自動再生できず、色々調べたところ以下の解決策を見つけました。 。
フロントエンドソリューション
<video :src="item.url" muted autoplay loop preload
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline></video>
最初の 4 つの属性:
muted: ミュート再生、一般的なブラウザー Chrome を例に挙げると、ユーザーはビデオを再生するためにページを 1 回操作する必要があり、ユーザーは autoplay: autoplay ループに入った後にサウンドを直接表示することはできませ
ん
。ループ再生
プリロード: プリロード再生、デフォルトの属性値は auto です。大きなファイルをキャッシュするため。これには 3 つのオプションの値があります: 「none」はキャッシュしません、「auto」はキャッシュします、「;metadata」はファイルのメタ情報の最後の 4 つの属性のみをキャッシュします。これは、データを参照するときに見られるフロントエンド ソリューションです
。最後の 4 つの属性、iOS は再生可能
x5-video-player-fullscreen="true": 全画面設定、true に設定するとデフォルトの全画面再生となり、iOS の Web ページでのビデオのデフォルトの全画面再生 playsinline= "
true" webkit-playsinline="true は iOS を自動的に解決します 全画面再生の問題を解決します
x5-video-player-type="h5" x5-video-player-fullscreen="true" 同じレベルの Android 再生を解決します
バックエンドソリューション
1. シナリオの説明
サーバーは MP4 ビデオ ファイルをアップロードし、iOS クライアントは URL を通じてビデオ ファイルを再生します。
2. 問題の内容
Android スマートフォンでは正常に動画を再生できますが、iOS スマートフォンでは動画が再生できず、PC の Safari ブラウザでも再生できません。
3. 問題の分析
(1) MP4 ファイルは内部ネットワークの IP アドレスを使用して再生できますが、外部ネットワークのドメイン名を使用して MP4 ファイルを再生することはできません。
(2) 外部ドメイン名を使用して、Nginx プロキシ経由で MP4 ファイルのパスを取得します。
(3) Safari はファイル ストリーム全体をサポートしていません。サーバーはセグメント化されたリクエストをサポートする必要があります。
(4) Safari のファイル ストリームに対するリクエストにはリクエスト ヘッダー Range とレスポンス ヘッダー Content-Range が含まれている必要があり、Nginx によってプロキシされた後は Range に関する情報は返されません。
4. 解決策
まず、Range タグの戻りをサポートするように Nginx を設定し、行 add_header Accept-Ranges bytes:
server { listen 80; location ~xxx{ add_header Accept-Ranges bytes; }を追加するだけです。有効にすると、iOS は MP4 ビデオ ファイルを要求します。 Nginx は Range に関連する情報を返します。
情報を検索したところ、iOS で MP4 ビデオ ファイルを再生できないという解決策が見つかりました。iPhoneでmp4 ビデオが再生できない場合はどうすればよいですか