微信瀏覽器video播放視頻踩坑

video屬性介紹

iOS的屬性

playsinline

• On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
• video elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
• When exiting fullscreen with a pinch gesture, video elements without playsinline will continue to play inline.

來源-webkit官網-New video policiesfor iOS

iOS設置了這個屬性就不會自動全屏了，但是Android微信和QQ有騰訊的限制，仍舊會自動全屏。

騰訊X5屬性

x5-video-player-type

啟用Ｈ5同層播放器

H5同層播放器：DOM可以浮在video上面

非H5同層播放器：video元素在最上層
（ 微信里會有騰訊的廣告 ）

x5-video-player-fullscreen

全屏方式

視頻播放時將會進入到全屏模式
如果不申明此屬性，頁面得到視口區域為原始視口大小(視頻未播放前)，比如在微信里，會有一個常駐的標題欄，如果不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分為兩塊（上下黑塊）

來源-騰訊瀏覽服務-H5同層播放器接入規范

相關CSS

object-fit: 控制視頻填充方式

object-position: 控制視頻顯示位置

問題

全面屏適配

x5-video-player-fullscreen="true"

視頻會鋪滿屏幕，但是H5同層播放器的頂部欄位置在劉海下面。因此劉海位置的視頻不會被頂部欄遮蓋。

x5-video-player-fullscreen="false"

視頻不會鋪滿屏幕，大多數機型和H5同層播放器大小一致，劉海處黑色。部分機型，如小米8，則有問題。

實際效果

是否啟用同層播放器都會自動進入全屏，區別是全屏使用的播放器不同。

案例：

輕視頻：示例

沒有啟用H5同層播放器，但播放不會自動進入全屏。網上有說法，視頻格式是立體聲的，不會自動進入全屏。輕視頻的視頻格式確實是立體聲的，但使用輕視頻的視頻試驗，仍舊會自動進入全屏。
（此處有沒有大佬解答！！）

快手：示例

快手復制鏈接到微信，提示用瀏覽器打開。直接從快手APP分享到微信，才能在微信打開。

啟用H5同層瀏覽器，自動進入全屏。