隐藏原生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. C# GMap下提供一个高德地图

    using System; using GMap.NET.Internals; using GMap.NET.Projections; namespace GMap.NET.MapProviders ...

  2. 如何在自己的代码中实现分享视频文件或者是图片文件到微信 QQ微博 新浪微博等！！！

    首先在文档第一句我先自嘲下 , 我是大傻逼, 弄了两天微信是视频分享,一直被说为啥跟系统的相册分享的不一样,尼玛!!! 这里来说正文,我这里不像多少太多,大家都是程序猿,具体的阔以看代码. 搞代码之前 ...

  3. github Android-Universal-Image-Loader

    目存在于Github上面https://github.com/nostra13/Android-Universal-Image-Loader,我们可以先看看这个开源库存在哪些特征 多线程下载图片,图片 ...

  4. 如何写一个HttpClient[1]——URI的处理

    如何写一个HttpClient[1]--URI的处理 在翻阅apache的http client的代码的时候,看到org.apache.http.client.utils.URIBuilder.jav ...

  5. [综合]visio2013安装提示找不到Office.zh_cn\officeMUI.mis officemui.xml

    在visio2013安装提示找不到Office.zh_cn\officeMUI.mis officemui.xml 等等,各种提示,可是打开安装程序所在的ISO,里面可是“赶集网”——啥都有啊.上网查 ...

  6. 突袭HTML5之WebGL 3D概述

    WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...

  7. IOS随机随学

    1.Objective-C是一种面向对象的语言. 2.Objective-C类声明和实现包括两个部分:接口部分和实现部分. 3.Objective-C中方法不是在“.”运算符,而是采用“[]”运算符. ...

  8. DNS-2

    ipconfig 用法: ipconfig [/allcompartments] [/? | /all | /renew [adapter] | /release [adapter] | /renew ...

  9. HTML如何让文本两端对齐

    <p style="text-align:justify; text-justify:inter-ideograph;>日本驻华大使丹羽宇一郎:日中关系比夫妻还紧密日本驻华大使丹 ...

  10. python :模态对话框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...