查看以及修改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. 二级py--day3

    二级PY--day3 1.结构化程序设计方法主要原则:自顶向下.逐步求精.模块化.限制使用goto语句 2.三种控制结构:顺序.选择和重复(循环) 3.结构化程序强调:程序的可复用性 4.结构化程序设 ...

  2. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  3. bash shell 快捷键

     Bash Shell 快捷键: Ctrl + a - 跳到行首      Ctrl + e - 跳到行尾     Ctrl + k - 从光标处删除到行尾     Ctrl + l - 清屏,类似  ...

  4. java反射之java 泛型的本质

    1.泛型 反射API用来生成在当前JAVA虚拟机中的类.接口或者对象的信息.Class类:反射的核心类,可以获取类的属性,方法等内容信息.Field类:Java.lang.reflect.表示类的属性 ...

  5. 揭秘.NET Core剪裁器背后的技术

    十天前,我发布了对.NET Core程序进行瘦身的开源软件Zack.DotNetTrimmer,与.NET Core内置的剪裁器相比,Zack.DotNetTrimmer不仅对程序的剪裁效果更好,而且 ...

  6. 一文让你明白CPU上下文切换

    我们都知道,Linux 是一个多任务操作系统,它支持远大于 CPU 数量的任务同时运行.当然,这些任务实际上并不是真的在同时运行,而是因为系统在很短的时间内,将 CPU 轮流分配给它们,造成多任务同时 ...

  7. 所有整数型包装类对象值的比较,使用equals方法进行比较

    一.整数型包装类对象值的比较,使用equals方法进行比较 题眼:整型包装类.值的比较 注:== :对于基本类型,比较的是值:对于引用类型,比较的是地址值. // 组一Integer i1=new I ...

  8. Java基础——继承的特点

    继承的优点: 1.提高了代码的复用性(多个类相同的成员可以放到一个类中) 2.提高了代码的维护性(如果要修改方法,只需要修改父类中的即可) 继承的缺点: 1.继承让类与类产生了关系,类的耦合性增强了, ...

  9. Anaconda环境配置

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 前言 Anaconda环境配置 Anaconda安装完后要进行环境配置,环境配置就是安装虚拟环境,让程序可以在这个环境中运行! 一.Anacon ...

  10. 网络监听HTTP协议信息实验

    一.开启环境 登录web服务器,在服务器中开启phpstudy服务器环境. 在操作机中打开目标站[Web服务器IP地址]地址.安装wordpress,数据库名:wordpress,用户名root 密码 ...