关于网页<video>标签隐藏control的疑问?

大家好,最近我司测试人员提出了一个BUG,就是我们的H5网页上的视频在手机端浏览器观看的时候,会被浏览器的一些默认视频嗅探所捕获,被加上一些浏览器的视频播放control,想请问怎么去禁止手机浏览器的这种行为。

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
  <video autoplay width="800px" style="pointer-events: none;" muted ref="video"
          playsinline="true"
          x-webkit-airplay="true"
          x5-playsinline="true"
          webkit-playsinline="true"
          x5-video-player-type="h5">
    <source src="./YourCroppedMovice.mp4" type="video/mp4">
  </video>
</body>
</html>

PC网页播放效果如下,是没有control的。

然后我在QQ浏览器、夸克浏览器里面是带有control的,如图

像这种手机浏览器自带的control怎么让它不显示呢。

阅读 3.4k
4 个回答
✓ 已被采纳

调研和尝试了网上一些方案,看起来都没用。查看can i use也确实是不支持的。
但解决方案我认为是有的,可以考虑通过canvas进行视频的播放,这样就不用被限制了。不过缺点也很明显了,少了很多系统支持,而且大概率很卡。

image.png

尝试过的无效方案

  1. 通过css处理,无效,且ui是和Trident内核,和 webkit 关系不大
  2. 通过z-index添加蒙层,无效

视频播放器这个部分没法彻底统一体验,只能根据需要做取舍。

一般手机浏览器都会对网页中的video进行解析,然后使用自己自带的播放器去播放。

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