处理 H5 视频标签在浏览器悬浮问题

• 问题：在手机端浏览器浏览视频的时候会被劫持，悬浮，全屏等问题
• 处理代码

<video
  x-webkit-airplay="allow"
  playsinline
  webkit-playsinline
  x5-playsinline
  controlslist="nodownload"
  t7-video-player-type="inline"
  x5-video-player-type="h5-page"
  disablePictureInPicture
  muted
  autoplay
  src="https://static.alibabagroup.com/static/fb23a195-4822-4688-9809-db1609ae29c9.mp4"
></video>

• x-webkit-airplay: AirPlay 的设备
• playsinline: 内联播放，非强制全屏播放
• webkit-playsinline: 兼容 webkit 内核的浏览器
• x5-playsinline: 兼容 x5 内核的浏览器
• controlslist: 默认控件
• t7-video-player-type: 支持百度手机浏览器，t7 是内核
• x5-video-player-type: 支持腾讯浏览器，x5 是内核
• disablePictureInPicture: 禁止画中画
• muted: 静音，如果要自动播放的话，需开启此项
• autoplay: 自动播放

修改前后对比

• 
• 

ios 百度手机浏览器问题

• 这样可以处理大部分的浏览器了
• 但是 ios 在百度手机浏览器上面还是有些问题
• 处理

方法 1. 视频标签距离顶部的距离 >= 176px(或者半屏)

方法 2. video 视频地址不跨域

<video
  x-webkit-airplay="allow"
  playsinline
  webkit-playsinline
  x5-playsinline
  controlslist="nodownload"
  t7-video-player-type="inline"
  x5-video-player-type="h5-page"
  disablePictureInPicture
  muted
  autoplay
>
  <source src="/demo.mp4" type="video/mp4" />
</video>

方法 3. 设置 meta 标签的 viewport

<!-- 原来 -->
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1,user-scalable=0"
/>
<!-- 新的,此处 0 不要超过 15 位 -->
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0000001,minimum-scale=1.0,maximum-scale=1,user-scalable=0"
/>
<!-- 新的 -->
<meta name="viewport" content="width=414, user-scalable=no, target-densitydpi=device-dpi" />

总结

• 这是一些兼容性写法，如果有更好的方法或者遇到了问题，欢迎交流~~