KyleThanas

# 视频播放--全屏处理

在移动端浏览器， video 在用户点击播放或者通过API video.play() 触发播放时，会强制以全屏置顶的形式进行播放，设计的初衷可能是因为全屏能提供更好的用户体验，但有时候开发者希望能自己控制是否全屏从而实现其他需求。

# playsinline 取消全屏

如果想实现不全屏播放，只需在video标签加个 playsinline 属性即可，这个属性在基于webkit内核的移动端浏览器基本没问题，实在不行就再加个 webkit-playsinline ：
<video
   src={videoUrl}
   webkit-playsinline="true"
   playsinline="true"
 />
原文地址：https://github.com/ProtoTeam/blog/blob/master/201806/1.md (opens new window)
而国内常见的PC浏览器如UC浏览器、QQ浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器以及移动端的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，本质上我们可以认为市场上移动端用户使用的基本上都是webkit内核或者基于 webkit 内核做修改的浏览器，所以 playsinline 的兼容性非常好！

  • Trident在移动端主要为WP7系统内置浏览器
  • Presto在所有联网设备上都使用，移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
  • Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

其中：

  • 微软IE的Trident
  • 网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko
  • KDE的开源内核Webkit
  • Opera的Presto

# playsinline 兼容性

  • 微软IE的Trident
  • 网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko
  • KDE的开源内核Webkit
  • Opera的Presto

其中：

  • Trident在移动端主要为WP7系统内置浏览器
  • Presto在所有联网设备上都使用，移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
  • Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

而国内常见的PC浏览器如UC浏览器、QQ浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器以及移动端的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，本质上我们可以认为市场上移动端用户使用的基本上都是webkit内核或者基于 webkit 内核做修改的浏览器，所以 playsinline 的兼容性非常好！

← js编码解码 →