HTML5を使ってWeChatで全画面再生を実装する方法を詳しく解説

iOS および Android スマートフォンで WeChat でビデオを再生すると、ビデオが再生される前に手動でクリックする必要があり、ビデオが WeChat ボックスから飛び出してコントロール バーが表示されるなど、多くの問題が発生します。ビデオが Tencent Video ではない場合、再生は完了します。Tencent Video の広告プッシュなどの問題が発生します。この記事では、HTML5 WeChat 再生の全画面問題の解決策を紹介します。 iOS および Android スマートフォンで WeChat でビデオを再生すると、ビデオを再生する前に手動でクリックする必要がある場合や、ビデオが WeChat ボックスから飛び出してコントロール バーが表示されるなど、多くの問題が発生します。ビデオは Tencent Video ではありません。再生後に Tencent 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 を設定する必要があることです

delete

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

<p id="videobox">
   <video 
    id="videoALL" 
    src="mp4.mp4" 
    poster="1.jpg" 
    preload="auto" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 
   <p id="btn" onclick="playcontr()"></p>
</p>
<p id="videoend"><p id="againbtn" onclick="playcontr()"></p></p>

rreerreeee

【関連する推奨事項】

1.

Html5 の無料ビデオチュートリアル2. H5 の新しいタグによるブラウザーの互換性の問題について詳しく説明します

3. 更新せずに現在の URL を変更する H5 の使用方法を説明します

4. phonegap を介してデータベースを操作する詳細なチュートリアル

5. H5 の IndexedDB データベースを使用します

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