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

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, 覆盖才会生效

阅读 158
评论
    3 个回答
    • 18.3k

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

    image.png

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


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

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

        • 731

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

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章