视频播放--全屏处理

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

playsinline 取消全屏

如果想实现不全屏播放,只需在video标签加个 playsinline 属性即可,这个属性在基于webkit内核的移动端浏览器基本没问题,实在不行就再加个 webkit-playsinline :

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 的兼容性非常好!

原文地址:https://github.com/ProtoTeam/blog/blob/master/201806/1.md

你可能感兴趣的