H5同層ビデオプレーヤーアクセス例の共有

この記事では主に、WeChat x5-video-player-type で同じレイヤーの H5 ビデオ プレーヤーにアクセスするチュートリアルを共有します。同じレイヤーの H5 プレーヤーを有効にするには、ビデオを通じて同じレイヤーの H5 プレーヤーを宣言します。属性 "x5-video-player-type"。x5-video-player-type でサポートされる値のタイプ: h5

例:

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

注: この属性は再生前に設定する必要があります。以下の「x5-video-player-fullscreen」にも同じことが当てはまります

x5-video-player-fullscreen 全画面モード

ビデオは再生時に全画面モードになります

この属性が宣言されていない場合、ページは元のビューポート サイズ (ビデオが再生される前) になります (WeChat など)。この属性が宣言されていない場合、タイトル バーの高さは与えられません。ページは、再生中に 2 つの等しい部分 (上部と下部の黒いブロック) に分割されます。 注: この属性を宣言するには、ページ自体が新しいビューポート サイズの変更に適応する必要があります。これは、サイズ変更イベントをリッスンすることで実現できます

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

全画面を実現するには、ウィンドウ サイズの変更 (サイズ変更) を監視する必要があります

window.onresize = function(){

  test_video.style.width = window.innerWidth + "px";

  test_video.style.height = window.innerHeight + "px";

}

注: 1. ビデオを完全に全画面に表示するには、適切にビデオの表示領域をビューポート領域より大きくすることで、表示時にビューポートの外側の部分が切り取られた後、その周りに黒い境界線が表示されなくなります。

x5-video-orientation は水平方向を制御します。

機能: プレーヤーがサポートする方向を宣言します

オプションの値: 横向きの水平画面、縦向きの画面

デフォルト値: 縦向き

例: http://res.imtt.qq.com/ qqbrow...

横画面

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

縦画面

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

携帯電話をフォローすると自動的に回転します

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

注: この属性は、x5-video-player-type="h5" が宣言されている場合にのみ有効になります

イベントcallback

x5videoenterfullscreen が全画面通知に入ります

サポートされているバージョン: TBS は >=036900 からサポートされ、QB は >= 7.2 vX5VideoEnterfullScreen のサポートを開始します: プレーヤーが全画面ステータスになることを表します。 例: JS を介して

<video id=“myVideo".../>

を表示します。監視インシデント

myVideo.addEventListener("x5videoenterfullscreen", function(){

  alert("player enterfullscreen");

})

E

VIDEOEEXITFULLLLLLLLLLEN 全画面通知を終了します

X5VIDEOEEXITFULLLLLLLLLLEN: プレーヤーが全画面形状を終了することを意味します 使用方法は X5VIDEOENTERLLLLLLLLLLLLEN と似ています

同じレイヤーのプレーヤーを使用するためのいくつかの提案

サイズ変更イベントをリッスンして、適応的なビューポート サイズ変更を実装します。ビューポート サイズはビデオ再生中に調整されます

ビデオ再生中のインタラクション、ポップアップ ボックス、ビデオ領域外ではなくビデオ領域内の字幕

1. ライブ全画面ビデオの場合、インタラクティブ要素を上部に配置しないことをお勧めします

2. インタラクティブビデオの実装に関する提案
   ビデオ領域（ビデオ要素）の上での操作を許可します

3. 全画面インタラクションが必要な方向け、ビデオ領域をビューポート サイズ>

同じレイヤー プレーヤー サポート バージョン

TBS WeChat:

1. TBS カーネル>=036849 に設定してから、
   UA のサポートを開始できます。例:

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 ビルド/KTU84P) AppleWebKit/537.36 (KHTML、Gecko など) バージョン/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/ 6.3.27.861 NetType/WIFI 言語/zh_CN

TBSモバイルQQ：

TBSカーネル＆gt; =036855

androidqqブラウザー：

browserバージョン＆gt; =7.1

ua例：

useragent：mozilla/ 5.0（linux; u; android 4.4.4; zhcn; zhcn; R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

ビデオ表示位置制御

デフォルトのビデオは、指定された領域の中央に表示されます。 CSS object-position 属性を通じてビデオの表示位置 (左上隅) を制御できます

例: http://res.imtt.qq.com/qqbrow...

上部:

myVideo.style["object-position"]= "0px 0px"

レンダリング:

下部ディスプレイ:

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"

効果:

関連推奨事項:

HTML5 Miranaビデオプレーヤー (コードオープンソース) _html5 チュートリアルスキル

以上がH5同層ビデオプレーヤーアクセス例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。