video屬性介紹 iOS的屬性 playsinline On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mod ...
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
全屏方式
視頻播放時將會進入到全屏模式
如果不申明此屬性，頁面得到視口區域為原始視口大小(視頻未播放前)，比如在微信里，會有一個常駐的標題欄，如果不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分為兩塊（上下黑塊）
相關CSS
object-fit: 控制視頻填充方式
object-position: 控制視頻顯示位置
問題
全面屏適配
x5-video-player-fullscreen="true"
視頻會鋪滿屏幕，但是H5同層播放器的頂部欄位置在劉海下麵。因此劉海位置的視頻不會被頂部欄遮蓋。
x5-video-player-fullscreen="false"
視頻不會鋪滿屏幕，大多數機型和H5同層播放器大小一致，劉海處黑色。部分機型，如小米8，則有問題。
實際效果
是否啟用同層播放器都會自動進入全屏，區別是全屏使用的播放器不同。
案例：
輕視頻：示例
沒有啟用H5同層播放器，但播放不會自動進入全屏。網上有說法，視頻格式是立體聲的，不會自動進入全屏。輕視頻的視頻格式確實是立體聲的，但使用輕視頻的視頻試驗，仍舊會自動進入全屏。
（此處有沒有大佬解答！！）
快手：示例
快手複製鏈接到微信，提示用瀏覽器打開。直接從快手APP分享到微信，才能在微信打開。
啟用H5同層瀏覽器，自動進入全屏。
