如何在安卓微信h5 实现不全屏播放视频,又可以覆盖元素

问题描述

在微信中,安卓使用video播放视频,默认会全屏播放,并且视频会处于最顶层,视频上面无法覆盖其他dom,使用x5的同层播放 x5-video-player-type="h5"可以解决这个video上面不能覆盖元素的问题,但是也会全屏。

发现花椒直播里面的分享页在微信中打开,竟然可以不用全屏,并且还有弹幕等元素覆盖在播放器上面,不清楚是什么原理。有人遇到过这种问题嘛?
花椒直播安卓微信端截图

clipboard.png

花椒直播分享地址 http://h.huajiao.com/l/index?...

clipboard.png

花椒直播video(在PC端调试查看的代码)

clipboard.png

<video
     autoPlay
     playsInline
     webkit-playsinline="true"
     x-webkit-airplay="true"
     width='100%'
     height='666.6666666666666'
     preload='auto'
     poster="http://image.huajiao.com/ab7551a8fc606b4a9c13c984dd03d403-360_640.jpg"
        >你的浏览器不支持video
  </video>

并没有发现任何特殊的处理,并且x5-的任何属性都没加上。

尝试用canvas绘制video,发现安卓微信端找不到video标签。绘制出来是白屏。 失败!!!

经常尝试各种网友的解决方案,目前只能实现这两种方式

  • 1.加上x5-playsinline="true"

video可以不全屏播放,但是不能覆盖元素

  • 2.加上 x5-video-player-type="h5"

video全屏播放,video上可以覆盖元素

故求问!!!
如何在安卓微信端实现不全屏播放视频,又可以覆盖元素的实现方式

阅读 5.2k
2 个回答

你不用video的全屏特性,直接把宽高设满

最近也在研究这个相关的东西。题主的问题与我很相似。请问题主解决了吗。另外 x5-video-player-type="h5" 这个属性可以写为x5-video-player-type="h5-page" 效果会更好一些。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题