video踩坑
查看以及修改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踩坑的更多相关文章
- H5 video踩坑实录
前段时间公司APP做了一个APP论坛会议,嵌入了h5播放器.我以为很简单,没想到,这正是我踩进泥潭的开始... (想要吸取经验的小伙伴可以慢慢往下看,想要解决方案的直接看最后!) 一.一开始我以为直接 ...
- 移动端Video标签踩坑记录
需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- Android原生编解码接口 MediaCodec 之——踩坑
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/gb702250823/article/d ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- 【踩坑速记】二次依赖?android studio编译运行各种踩坑解决方案,杜绝弯路,总有你想要的~
这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...
- NPOI导出Excel (C#) 踩坑 之--The maximum column width for an individual cell is 255 charaters
/******************************************************************* * 版权所有: * 类 名 称:ExcelHelper * 作 ...
随机推荐
- 为游戏编写boss剧情
教程目录: 1. 小游戏展示 2. 下载游戏引擎 3. 创作一个移动的背景 4. 让阿菌煽动翅膀 5. 让阿菌模拟重力下坠 6. 让阿菌可以摸鱼 7. 编写游戏开始与结束 8. 编写 boss 剧情 ...
- linux文件目录权限操作
设置修改文件的属主或修改文件属组 [root@localhost ~]# ll test.txt -rw-r--r--. 1 root root 0 Oct 21 12:01 test.txt [ro ...
- Linux备份数据库,mysqldump命令实例详解
mysqldump是mysql数据库中备份工具,用于将MYSQL服务器中的数据库以标准的sql语言的方式导出,并保存到文件中. 语法: mysqldump (选项) 选项: --add-drop-ta ...
- 1251-Client does not support authentication protocol requested by server; consider upgrading MySQL client。
三:出现的一个错误在安装完MySQL的时候,我们现在一般都使用Navicat来连接数据库,可惜出现下面的错误:1251-Client does not support authentication p ...
- LGP4216题解
这是一种题解没有的 \(O(m\log n)\) 做法. 首先第一步转化.设这是第 \(x\) 个任务,若 \(opt\) 为 \(1\),危险值大于 \(c\) 的只有可能在第 \(x-c-1\) ...
- mybatis连接sql
mysql6以上 com.mysql.cj.jdbc.Driver
- 敏捷开发之Scrum方法运用
目前软件开发除了强调产品质量,同时对产品能够快速发布并且迅速适应市场变化的要求也日益强烈.为适应这种开发环境和市场需求,传统的软件开发模式已被敏捷开发模式所替代.本文介绍敏捷软件开发中的Scrum方法 ...
- 【公告】淘宝 npm 域名即将切换 && npmmirror 重构升级
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 前言 本文将包括两部分内容: 淘宝 npm 域名即将停止解析 npmmirror 镜像站大重构升级 原淘宝 npm 域名即将停止解析 正如在< ...
- java中对集合操作的易错点01
今天用for循环遍历集合,对集合中满足条件的元素进行remove操作报错:ConcurrentModificationException 所以,在遍历集合进行增.删操作时,要使用迭代器的方式 publ ...
- python练习册 每天一个小程序 第0010题
# -*-coding:utf-8-*- ''' 题目描述: 使用 Python 生成类似于下图中的字母验证码图片 思路: 运用PIL库加random 随机字母进行生成 ''' import rand ...