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

iOS および Android スマートフォンで WeChat でビデオを再生すると、ビデオが再生される前に手動でクリックする必要があり、ビデオが WeChat ボックスから飛び出してコントロール バーが表示されるなど、多くの問題が発生します。ビデオが Tencent Video ではない場合、再生は完了します。Tencent Video の広告プッシュなどの問題が発生します。この記事では、HTML5 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; をビデオに追加します。まだ黒い枠が残っている場合は、ビデオのサイズが不適切である可能性があります。

<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></p>
<p></p>
<p></p>
<pre class="brush:php;toolbar:false">*{
            padding: 0;
            margin: 0;
        }
    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    #videoALL{
  height: auto;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
  background-size: cover;
  overflow: hidden;}
    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

<script>
var videoALL = document.getElementById('videoALL'),
    videobox = document.getElementById('videobox'),
    btn = document.getElementById('btn'),
    videoend =  document.getElementById('videoend');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + 'px';
videoALL.style.height = 'auto';
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
function stylep(pId){
    pId.style.width = clientWidth + 'px';
    pId.style.height = clientHeight +200+ 'px'; 
}
stylep(videobox);
stylep(videoend);
var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
function playcontr(){
    if (isAndroid) {
       videoALL.style.width = window.screen.width + 'px';
       videoALL.style.height = window.screen.height + 'px'; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};
videoALL.addEventListener('pause',function(){  
    videoALL.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  
videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});
</script>

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

関連する推奨事項:

WeChat アプレットはビデオコンポーネントを使用してビデオを再生する関数の例

H5 を使用してオーディオとビデオを操作する方法

現在のオーディオまたはビデオの再生を開始する html5 メソッド

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