查看以及修改video控件样式,原文地址:https://blog.csdn.net/z2181745/article/details/82531686

chrome浏览器,F12调出控制台左上角三点更多有个settings,点击进去之后有个“show user agent shadow DOM”勾选刷新页面,video控件就可以查看到元素啦;

一:在移动端使用video没有写controls属性的情况下android(测试机华为p9android版本8.0)还是会在播放过程中显示控件,ios(测试机iphone6)不会显示;

  在w3c官方文档中也解释啦,

二:在使用video最好外围包裹一个div其css样式overflow:hidden;否则和其下放会有间隔,猜想可能是控件会影响其高度;

三:video在移动端中间会显示一个播放按钮,在chrome浏览器上是看不到,但是在火狐浏览器是可以看到,应该是浏览器内置的样式;并且给video设置poster首屏图片 但是播放按钮还是会显示在图片上方;

四:一般的控件是可以根据video的api进行自定义样式,或者通过video+canvas实现视频播放;

目前该解决的问题,如何在没有controls的情况下使android浏览器不显示控件;

五:移动端会自动的全屏播放,加入-webkit-playsinline x5-playsinline plasysinline则不会自动全屏播放

video踩坑的更多相关文章

  1. H5 video踩坑实录

    前段时间公司APP做了一个APP论坛会议,嵌入了h5播放器.我以为很简单,没想到,这正是我踩进泥潭的开始... (想要吸取经验的小伙伴可以慢慢往下看,想要解决方案的直接看最后!) 一.一开始我以为直接 ...

  2. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  3. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  4. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  5. Android原生编解码接口 MediaCodec 之——踩坑

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/gb702250823/article/d ...

  6. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  7. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  8. 【踩坑速记】二次依赖?android studio编译运行各种踩坑解决方案,杜绝弯路,总有你想要的~

    这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...

  9. NPOI导出Excel (C#) 踩坑 之--The maximum column width for an individual cell is 255 charaters

    /******************************************************************* * 版权所有: * 类 名 称:ExcelHelper * 作 ...

随机推荐

  1. linux 中 /dev/null和/dev/zero的作用以及区别

    在类Unix操作系统中,设备节点并不一定要对应物理设备.没有这种对应关系的设备被称之为伪设备.操作系统运用了它们实现多种多样的功能,/dev/null和/dev/zero就是这样的设备,类似的还有/d ...

  2. 29 面向对象编程 static 关键字

    补充:static 代码 // static public class Student{ private static int age; // 静态的变量 多线程 private double sco ...

  3. 监听页面中的某个div的滚动事件,并将其滚动距离保存到cookie

    在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...

  4. 2022最新IntellJ IDEA的mall开发部署文档

    目录 版本说明 一.概述 二.基本构建 三.Git 导入编译器 四.模块描述浅析 五.配置文档 application.yml修改,涉及模块 application-dev.yml修改,涉及模块 ge ...

  5. python算法 前缀和

    这里有 n 个航班,它们分别从 1 到 n 进行编号.有一份航班预订表 bookings ,表中第 i 条预订记录 bookings[i] = [firsti, lasti, seatsi] 意味着在 ...

  6. javaweb项目对https的配置01

    1.准备证书生成 a.进入到jdk下的bin目录(如果配置了Java的环境,可以直接在cmd命令窗口中直接输入如下命令) keytool -v -genkey -alias tomcat -keyal ...

  7. 无刷电调修理方法 | 银燕(EMAX)12A无刷电调维修

    一. 银燕(XP-12A)电调修理 笔者的电调在使用4S电池时烧毁,其中一个PMOS管明显烧焦. 将其拆除,买来新元件重新焊接,通电依然冒烟了. 引脚定义 丝印662F: XC6206P332MR 低 ...

  8. 半吊子菜鸟学Web开发6 -- Vscode开发环境配置

    1vscode上手一周不到,终于弄出点门路,终于弄清楚了点vscode的设置是什么样子的了....哭 2就我这两天的使用来看,一般vscode默认只让打开一个文件夹,然后在你打开的文件夹里面自动生成 ...

  9. Linux下使用压力测试工具stress

    一:stress的安装 首先解压安装包到/usr/local/src/下 mv stress-1.0.4.tar.gz /usr/local/src​tar -zxf stress-1.0.4.tar ...

  10. Kafka 消费者是否可以消费指定分区消息?

    Kafa consumer消费消息时,向broker发出fetch请求去消费特定分区的消息,consumer指定消息在日志中的偏移量(offset),就可以消费从这个位置开始的消息,customer拥 ...