隐藏原生html5 video controls

凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了controls的值为false,但实际情况是比如暂停还是存在,导致与custom的重叠. 协助同事解决这个bug时还好找到了这篇文章(有空完整翻译下.=.=)

Hiding Native HTML5 Video Controls in Full-Screen Mode

呐,解决办法就是

video::-webkit-media-controls {

  display:none !important;

}

没错css,知道真相后泪流不止啊.这么设置后即使没有设置controls为false，native controls也不会再出现了.

参考

html5 video api

video属性及方法列表

隐藏原生html5 video controls的更多相关文章

  1. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  2. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  3. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  4. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  5. 移动端 HTML5 <video> 视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  6. [转]移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  7. DCloud-Video：Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...

  8. html5 video

    先简要概述一下video标签: video:嵌入视频到页面中 1. 声明video标签 单个视频的时候使用src: <video src="http://v2v.cc/~j/theor ...

  9. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

随机推荐

  1. git安装及命令使用和github网站

    最近参与别人的github项目时,学习了git的使用,首先需要在https://github.com/网站上注册账号和邮箱,然后fork一个开源项目,然后下载目前Windows下最新版本的git,下载 ...

  2. HTML5 input placeholder 颜色修改

    在开发中遇到的一个小问题,记录下来./*placehodel*/ input:-ms-input-placeholder{color:#a9a9a9;}/* Internet Explorer 10+ ...

  3. DEV皮肤颜色获取

    Skin GridSkin = GridSkins.GetSkin(UserLookAndFeel.Default.ActiveLookAndFeel); evenColor = GridSkin[G ...

  4. maven nexus 私服的搭建学习

    之前对maven有过初步的了解与认识,自己也创建过项目使用其来管理,但都是非常粗浅的操作,今天在高人的指点下,也学着在自己的电脑上搭建一个maven私服,虽然技术难度也不高,但为了更深层次的提高,这些 ...

  5. VS2010 MFC实现启动画面

    1.创建一个SDI工程(或者其他工程都可以). 2.创建一个位图资源命名为IDB_BITMAP1. 3.利用类向导添加一个类CMySplashCtrl(名字可以自己随便取). 4.在MySplashC ...

  6. FlasActionScript3随学随机

    1.跳转页面代码.下载代码(new URLRequest(下载地址)): var request1:URLRequest=new URLRequest("http://www.baidu.c ...

  7. Hibernate 基础配置及常用功能（一）

    本来是想等全部框架测试完以后再统一发布的,但是随着测试的一点点增加感觉把需要叙述的东西放在一起终将会是一场灾难.所以还是打算分成几章来描述,其中还包括一些有待解决的问题.短期很难腾出时间来仔细阅读Hi ...

  8. Oracle学习笔记（1）----忘记用户名的密码该如何找回

    (1)在连接数据库之前需要打开如下服务: (2)如果忘记用户的密码 I:打开cmd窗口 II:键入命令:connect / as sysdba; III:alter user 用户名 identifi ...

  9. SSO之CAS单点登录实例演示

    本文目录: 一.概述 二.演示环境 三.JDK安装配置 四.安全证书配置 五.部署CAS-Server相关的Tomcat 六.部署CAS-Client相关的Tomcat 七. 测试验证SSO 一.概述 ...

  10. JS IOS/iPhone的Safari不兼容Javascript中的Date()问题

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比 ...