アクセス仕様層とH5プレーヤー

テクニカルガイド>  アクセス仕様層とH5プレーヤー

アクセス仕様層とH5プレーヤー

X5-ビデオプレーヤー型層は、H5プレーヤーで有効になっています

ビデオ属性「X5-ビデオプレーヤー型」文を経由して同じ層H5プレーヤーを有効に

ページは、同一の層を表示するビデオ内X5-ビデオプレーヤー型タグを追加して、ビデオ再生の標準形式である:再生と内側層ウェブを制御するためにH5-ページ属性、ビデオHTML要素の上に表示されてもよいです。

例:  https://tencentx5.github.io/x5/video_page_samelayer.htm

:詳細については、を参照してください  https://docs.qq.com/doc/DTUxGdWZic0RLR29B

X5-ビデオプレーヤー - フルスクリーンフルスクリーン

ビデオ再生には、フルスクリーンモードに入ります

あなたは(動画が再生されていない前に)、マイクロチャネルとして、ビューポートの元のサイズに、ビューポートの面積を取得するには、このプロパティページを宣言しない場合は、タイトルバーの居住者があるでしょうあなたは、このプロパティを宣言しない場合、これは、タイトルバーの高さを与えることはありません再生中に均等に2つ(上下暗いブロック)に分割ページ、

注:このプロパティは宣言されているが、それは再適応自分のページに新しいビューポートのサイズの変更をする必要があります。イベントのサイズを変更するために聞くことによって達成することができます

<動画ID = "test_video" SRC = "XXX" X5・ビデオ・プレーヤー・タイプ= "H5" X5-ビデオプレーヤー - フルスクリーン= "真" />

私たちは、ウィンドウのサイズ変更(リサイズ)フルスクリーンを監視する必要があります

window.onresize =関数(){

  test_video.style.width = window.innerWidth + "PX"。

  test_video.style.height = window.innerHeight + "PX"。

}

注:1.表示領域がビューポートの外側切断さ部分に表示されたときにここで四週間、黒側がそうでないように、ビデオビューポート領域より適切に大きくすることができるように、実際に覆われたフルスクリーンビデオを可能にします

X5-ビデオ配向制御水平および垂直スクリーン

機能:プレイヤーのサポートの方向を宣言

使用可能な値:風景風景、portraint肖像画

デフォルト値:portraint

例えば:  http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横画面

<ビデオ... X5・ビデオ・プレーヤー・タイプ=」H5” X5・ビデオ・オリエンテーション= 『風景』 />

肖像画

<ビデオ... X5・ビデオ・プレーヤー・タイプ=「H5」X5・ビデオ・オリエンテーション=「ポートレート」/>

自動的に回転させるように携帯電話をフォロー

<ビデオ・X5・ビデオ・プレーヤー・タイプ= "H5" X5-ビデオの向き= "風景|肖像" />

注:このプロパティは唯一のX5-ビデオプレーヤー型=を有効に宣言されている「H5」の場合

イベントコールバック

フルスクリーンの通知を入力しx5videoenterfullscreen

サポートバージョン:スタートからのサポートでTBS = 036900>、QBは> = 7.2がサポートを開始します

x5videoenterfullscreen:プレーヤーは、フルスクリーンモードを入力することです

例:

<動画ID =「myVideo」... />

JSのモニター・イベントにより、

myVideo.addEventListener( "x5videoenterfullscreen"、関数(){

  警告( "選手enterfullscreen");

})

x5videoexitfullscreen出口フルスクリーン通知

x5videoexitfullscreen:プレーヤーは、フルスクリーンモードから外れています

同様の方法とx5videoenterfullscreenを使用して

いくつかはプレイヤーの同じ層を使用することをお勧めします

1.リスニングresizeイベントアダプティブビューポートのサイズの変更は、ビューポートのサイズのビデオ再生を調整します

ビデオ領域にない外箱、ビデオ領域におけるビデオのキャプションを、演奏ビデオ再生中に2相互作用、

クラスのライブフルスクリーンビデオ3.、最高のほとんどのインタラクティブな要素の一番上に置くためではありません

達成するためのインタラクティブなビデオ推薦

動作は上記ビデオ領域(video要素)を可能にします

1.フルスクリーン対話、ビデオ領域の必要性は、ビューポートのサイズに設定されてもよいです>

プレイヤーはレイヤーとバージョンをサポートしています

TBSマイクロ手紙:

サポートの開始後にTBSカーネル> = 036 849

UA例:

Mozillaの/ 5.0(Linuxでは、Androidの4.4.4; OPPO R7ビルド/ KTU84P)のAppleWebKit / 537.36(KHTML、ヤモリのような)バージョン/ 4.0クローム/ 37.0.0.0モバイルMQQBrowser / 6.8 TBS / 036849サファリ/ 537.36 MicroMessenger / 6.3.27.861 NETTYPE / WIFI言語/ zh_CNに

TBS手Q:

TBSカーネル> = 036855

AndroidのQQブラウザ:

ブラウザのバージョン> = 7.1

UA例:

ユーザーエージェント:Mozillaの/ 5.0(Linuxの; U; Androidの4.4.4; zhcnは、OPPO R7ビルド/ KTU84P)のAppleWebKit / 537.36(KHTML、ヤモリのような)バージョン/ 4.0クローム/ 37.0.0.0 MQQBrowser / 7.1モバイルサファリ/ 537.36

動画の表示位置制御

デフォルトのビデオ表示指定中間領域において、ビデオは、プロパティCSSのオブジェクトの位置(左上)での位置を制御することができます

例:  http://res.imtt.qq.com/qqbrowser/js/testx5videoplayertype.html

スティッキー:

myVideo.style [ "オブジェクト位置"] = "0PX 0PX"

レンダリング:

ディスプレイの下部:

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

myVideo.style [ "オブジェクト位置"] = "0PX" + offsetY + "PX"

効果:

Q&A

Q:どのように私は、新しいバージョンのTBSにインストールしますか?

2次元コードをスキャン使用マイクロチャンネルが自動的に更なる動作、スキャンした後にインストールされます。

Q:あなたはQQのブラウザをテストしたい場合は、QQのブラウザの新しいバージョンをインストールする方法

Q:どのような効果をテストするには、同じレベルのプレイヤーに入るように決定しましたか?

A:より多くの日よりも時間のあなたがテスト結果にしたい場合は、新たなTBSのバージョンをインストールした後、マイクロチャネルプロセスを強制終了、システムの後方、その後、ビデオ再生のためのWebを入力し、マイクロ手紙のトップバーには、没入型プレーヤーに姿を消した場合、層はプレイヤーに同じです。

Q:どのようにTBSは、現在のバージョンを表示していますか?

A:在微信聊天窗口输入//gettbs 并发送,查看弹出的Toast上显示的tbsCoreVersion 是否等于36849 ,若是则tbs版本正确。注:这是之后进行测试的基础,这个版本一定要正确

Q:接入了同层播放器,在老版本的tbs是否会出问题?

A:对老版本不会产生影响。

Q:同层播放器在iOS上会生效吗?

A:目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS

Q:同层播放器顶部”<”和“…”按钮可以去掉吗?

A:不能

Q: 在微信TBS里如何区是否支持同层播放器

A: a)在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持

UA示例:

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

b)在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持

UA示例:

UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

おすすめ

転載: www.cnblogs.com/2019gdiceboy/p/11844319.html