HTML5 WeChat での全画面再生の問題を解決する方法

この記事では、HTML5 WeChat での全画面再生の問題を解決する方法という新しい知識を引き続きお届けします。 iOS および Android スマートフォンで WeChat でビデオを再生すると、ビデオが再生される前に手動でクリックする必要があり、ビデオが WeChat ボックスから飛び出してコントロール バーが表示されるなど、多くの問題が発生します。動画が Tencent Video ではない場合、動画の再生後に Tencent Video の広告プッシュが表示されるなどの問題が発生します

解決策: video タグにいくつかの属性を追加し、h5 ネイティブ ビデオを呼び出します。

<video></video>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill">

poster="images/1.jpg": この属性は、ビデオのダウンロード時に表示される画像、またはユーザーが再生ボタンをクリックする前に表示される画像を指定します。このプロパティが設定されていない場合は、代わりにビデオの最初のフレームが使用されます。

preload="auto" : 属性は、ページが読み込まれた後にビデオが読み込まれることを指定します。

webkit-playsinline および playsinline: ビデオはローカルで再生され、ドキュメント ストリームから切り離されません。ただし、この属性は非常に特殊で、WeChat の UIwebview などの APP の Web ページに埋め込む必要があり、allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES を有効にします。つまり、アプリが設定していない場合、このタグをページに追加することは無効になります。これが、Android スマートフォンの WeChat が常に全画面でビデオを再生する理由です。アプリはプレイインラインをサポートしていませんが、ISO WeChat はサポートしているからです。

ここで、全画面ライブ ブロードキャストまたは全画面 H5 エクスペリエンスを実行したい場合は、ISO で webkit-playsinline タグを設定して削除する必要があることを付け加えておきます。これを false に設定するとサポートされないためです。 Android はデフォルトで全画面表示なので必要ありません。ただし、現時点では、コントロールを設定しているかどうかに関係なく、全画面表示には再生コントロールがあります。 ライブ ブロードキャストを行う場合は再生コントロールが必要になる場合がありますが、全画面 H5 では再生コントロールは必要ありません。全画面再生中にコントロールを削除するには、次の設定が必要です。 同じレイヤー再生。

x-webkit-airplay="allow" これが何をするのか正確に知ることはできませんが、編集者はこの属性によりこのビデオが iOS の AirPlay 機能をサポートするはずだと推測しています。 AirPlay を使用すると、iOS デバイス上のさまざまな場所からビデオ、音楽、写真ファイルを直接再生できます。つまり、AirPlay 機能を通じてオーディオ ファイルとビデオ ファイルをワイヤレスで再生できることが前提となります。再生に使用する端末機器も対応する機能をサポートしている必要があります。

x5-video-player-type: 同じレイヤーで H5 プレーヤーを有効にします。つまり、ビデオが全画面表示の場合、ビデオ レイヤーに p を表示できます。これは WeChat Android バージョンの固有の属性でもあります。同じレイヤー再生の別名はイマーシブ再生とも呼ばれます。再生すると全画面のように見えますが、コントロールと WeChat ナビゲーション バーが削除され、「X」キーと「

x5-video-orientation: プレーヤーがサポートする方向を宣言します。オプションの値は、横向きの水平画面、縦向きの垂直画面です。デフォルト値のポートレート。ライブブロードキャストでもフルスクリーン H5 でも、通常は縦方向に再生されますが、この属性では H5 モードをオンにするには x5-video-player-type が必要です

x5-video-player-fullscreen: フルスクリーン設定。 true と false の 2 つの属性値があります。True は全画面再生をサポートし、false は全画面再生をサポートしません。

実際、ISO WeChat ブラウザは Chrome の中核であり、関連するすべての属性がサポートされているため、X5 の同一レイヤー再生はサポートされていません。 Android WeChat ブラウザは X5 カーネルを使用しており、playsinline などの一部の属性タグがサポートされていないため、常に全画面表示になります。

Android の WeChat では、上記の属性を追加しても、上下に黒い枠が表示され、画面を全画面にできないという問題が発生します。

解決策: スタイル属性 object-fit: fill; をビデオに追加します。まだ黒い枠が残っている場合は、ビデオのサイズが不適切である可能性があります。

れーるーるーるー

みなさんは習いましたか？急いで試してみてください。

関連する推奨事項:

HTML5 で携帯電話のコード スキャン機能が有効になり、その長所と短所_html5 チュートリアルのスキル

HTML5 のグローバル属性の最も完全な概要

HTML5 の単一ページ ジェスチャー スライディング スクリーン切り替え原理分析

以上がHTML5 WeChat での全画面再生の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。