H5页面如何隐藏video 原本的 control

Question

html
<video
  ref="myVideo"
  webkit-playsinline
  playsinline
  :src="videoUrl"
  :poster="poster"
  style="width: 100%; height: 100%"
>
</video>

js
this.$ref.myVideo.controls = false


css
video::-webkit-media-controls-panel {
  display:none !important;
}

以上, 手机端video 还是会显示 controls, 该如何才会隐藏?
还有就是如何让div中的内容覆盖显示在video上, 例如弹幕网的弹幕, 一些图标之类的. 设置absolute z-index是无效的,
所以猜想是否要先隐藏了原本的control, 覆盖才会生效

Answer 1

我经过各种测试，发现只要把域名换成b站就能控制了，所以我怀疑他们充钱了。

其实后来我测试别的功能，有另一个思路， video 同步到 canvas 里面显示。然后你给canvas做一个controls

---

更新时间： 202101-15 10:45:00
做了个类似的demo，不行，哈哈哈。vivo里面直接拿不到了。应该他用的原生控件去播放的。不知道有没有什么方法能改成h5的
http://www.lilnong.top/static/html/video2canvas-20210115.html

Answer 2

手机浏览器的video一般是浏览器自己实现的，有的不符合w3c规范， 控制不了， z-index 也无效

Answer 3

给 video 标签添加样式pointer-events: none;