HTML5 WeChat での全画面再生の問題を解決する方法-H5 チュートリアル-php.cn

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

小云云

リリース： 2017-12-11 11:58:10

オリジナル

2027 人が閲覧しました

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>

ログイン後にコピー

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