H5 WeChat 再生の全画面問題を詳細に分析するためのサンプルコード-H5 チュートリアル-php.cn

H5 WeChat 再生の全画面問題を詳細に分析するためのサンプルコード

黄舟

リリース： 2017-03-13 17:25:40

オリジナル

2138 人が閲覧しました

iOS および Android スマートフォンで WeChat でビデオを再生すると、ビデオが再生される前に手動でクリックする必要があり、ビデオが WeChat ボックスから飛び出してコントロールバーが表示されるなど、多くの問題が発生します。ビデオが Tencent Video ではない場合、再生は完了します。Tencent Video の広告プッシュなどの問題が発生します。解決策: video タグにいくつかの

属性

を追加し、h5 ネイティブビデオを呼び出します。

<video  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill"></video>

ログイン後にコピー

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 の固有の属性でもありますアンドロイド版。同じレイヤー再生の別名はイマーシブ再生とも呼ばれます。再生すると全画面のように見えますが、コントロールと WeChat ナビゲーションバーが削除され、「X」キーと「<」キーだけが残ります。現在の同層プレーヤーは Android (WeChat を含む) でのみ動作し、当面は iOS をサポートしません。なぜ同じレイヤー再生が Android のみに公開されているかというと、Android は ISO のようにローカルで再生できないためです。フルスクリーンの H5 であれば問題ありませんが、ライブブロードキャストの場合は、次のような機能があります。弾幕としては実現できないため、現時点では同層再生の概念でこの問題を解決しています。ただし、テスト中に、ISO と Android のバージョンが異なると効果が若干異なることが判明しました。

x5-video-orientation

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

x5-video-player-fullscreen

:full-screen設定。 true と false の 2 つの属性値があります。True は全画面再生をサポートし、false は全画面再生をサポートしません。実際、ISO WeChat ブラウザは

Chr

ome のコアであり、関連するすべての属性がサポートされているため、X5 の同一レイヤー再生はサポートされていません。 Android WeChat ブラウザは X5 カーネルを使用しており、playsinline などの一部の属性タグがサポートされていないため、常に全画面表示になります。 Android の WeChat では、上記の属性を追加しても、上下に黒い枠が表示され、画面を全画面にできないという問題が発生します。

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

りー

以上がH5 WeChat 再生の全画面問題を詳細に分析するためのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。