H5 WeChat 再生を全画面で実装する方法

今回は、H5 WeChat で全画面再生を実現する方法と、H5 WeChat で全画面再生を実装するための 注意事項 を​​説明します。以下は実際のケースです。見てみましょう。

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

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; をビデオに追加します。まだ黒い枠が残っている場合は、ビデオのサイズが不適切である可能性があります。

    
   


rreerreeee
 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 
推奨読書: 

H5の保存方法を詳しく解説

zeptoはモバイル側でシームレスな上下スクロールを可能にします
以上がH5 WeChat 再生を全画面で実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。