查看以及修改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. java方法学习

    java方法学习 方法概念 什么是方法 方法就是完成某些事情的过程,如:实现两个数相加,用方法add(数值1,数值2). 1.System.out.print(),System是系统的一个类,out是 ...

  2. 2.4 C++STL deque容器详解

    文章目录 2.4.1 引入 2.4.2 代码示例 2.4.3 代码运行结果 2.4.4 具体案例 总结 2.4.1 引入 deque容器类比vector容器来学习. deque为双向开口容器,见下图. ...

  3. 商品模型:SPU、商品、SKU概念模型设计

    商品系统是电商SaaS.新零售SaaS最基础.最核心的系统之一.商品系统几乎需要支撑所有业务系统,商品详情.购物车.订单.履约.结算.售后.库存.供应链等,都需要依赖商品系统的能力.为了保障业务的稳定 ...

  4. RandomStringUtils 生成随机字符串

    代码: System.out.println(RandomStringUtils.randomAlphanumeric(32));System.out.println(RandomStringUtil ...

  5. ES6-ES12部分简单知识点总结,希望对大家有用~

    ES6-ES12简单知识点总结 1.ES6相关知识点 1.1.对象字面量的增强 ES6中对对象字面量的写法进行了增强,主要包含以下三个方面的增强: 属性的简写:当给对象设置属性时,如果希望变量名和属性 ...

  6. 如何批量修改图片名称(win下)

    深度学习目标检测任务中常常需要大量的图片,这些图片一般来自网络爬虫或是自行批量下载,但下载下的图片常常在保存时被命名为长段英文数字混写,因此规律化命名下载的图片数据名称就显得尤为重要了,下面我演示在本 ...

  7. 女朋友汇总表格弄了大半天,我实在看不下去了,用40行代码解决问题 | Python使用openpyxl库读写表格Excel(xlsx)

    1.openpyxl基本操作 python程序从excel文件中读数据基本遵循以下步骤: 1.import openpyxl 2.调用openpyxl模块下的load_workbook('你的文件名. ...

  8. 🍛 餐厅吃饭版理解 IO 模型:阻塞 / 非阻塞 / IO 复用 / 信号驱动 / 异步

    IO 概念 一个基本的 IO,它会涉及到两个系统对象,一个是调用这个 IO 的进程对象,另一个就是系统内核 (kernel).当一个 read 操作发生时,它会经历两个阶段: 通过 read 系统调用 ...

  9. 外部类能用private、protected修饰吗?内部类可以用private、protected修饰吗?

    外部类不能用private.protected修饰不能.内部类能用private.protected修饰不能. 外部类的上一级程序单位是包,因此它只有两个使用范围:包内和包外,因此它只能用public ...

  10. Could not find the main class

    最近开发了一个短信报警的服务,打成程序包之后,再本地windows启动(start.bat)没有问题,但是发到生产环境,报如下错: Could not find the main class 莫名其妙 ...