videojs在移动端遭遇的坑

3,734 阅读1分钟

所遇问题:

  1. andriod中video会在最顶层
  2. 视频没有铺满
  3. 使用vant的preview-image时,ios播放后,图片便显示不了
  4. 将x5-video-player-type设置为h5时,andriod不能全屏
  5. 将x5-video-player-type设置为h5-page时,andriod右上角出现全屏,滑动内容时,会抖动并会在页面最顶层
  6. 想让andriod在播放时就全屏,第一次点击播放全屏后,发现第二次播放后,显示不支持该格式,出现播放不了的问题

解决方法

andriod中video会在最顶层

需要将video设为内联形式,添加属性 x5-video-player-type 为 'h5' 或者 'h5-page'

视频没有铺满

将video的css设置一个属性 object-fit: cover/fill; fill会导致视频变形,而cover不会,但不会显示全

使用vant的preview-image时,ios播放后,图片便显示不了

函数调用 改为 组件调用

将x5-video-player-type设置为h5时,andriod不能全屏

不知原因,将x5-video-player-type改为h5-page

将x5-video-player-type设置为h5-page时,andriod右上角出现全屏,滑动内容时,会抖动并会在页面最顶层

未解决,求帮助

想让andriod在播放时就全屏,第一次点击播放全屏后,发现第二次播放后,显示不支持该格式,出现播放不了的问题

未解决,求帮助

问题图片