问答

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

作者:admin 2021-05-07 我要评论

htmlvideo ref="myVideo" webkit-playsinline playsinline :src="videoUrl" :poster="poster" style="width: 100%; height: 100%"/videojsthis.$ref.myVideo.con...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
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, 覆盖才会生效

###

我经过各种测试,发现只要把域名换成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 也无效

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • H5页面如何隐藏video 原本的 control

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

  • umi dev后想访问文件夹下的js失败

    umi dev后想访问文件夹下的js失败

  • koa 中间件next加上await 与不加await

    koa 中间件next加上await 与不加await

  • 某个字段的值某一时间段内不变,怎么自

    某个字段的值某一时间段内不变,怎么自

腾讯云代理商
海外云服务器