隐藏原生html5 video controls

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

Hiding Native HTML5 Video Controls in Full-Screen Mode

呐,解决办法就是

  1. video::-webkit-media-controls {
  2.   display:none !important;
  3. }

没错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. hduoj 1286 找新朋友

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 找新朋友 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  2. 邓博泽 java最全的DateUtil工具类

    package com.kld.yijie.web.util; import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java. ...

  3. 网络适配器输入的IP地址 已经分配给另一个适配器

    解决步骤:1.开始-运行-cmd2. set devmgr_show_nonpresent_devices=123.set devmgr_show_nonpresent_devices=14.star ...

  4. qt之串口

                                          qt串口讲解在QT中并没有特定的串口控制类,现在大部分人使用的是第三方写的qextserialport类,我们这里也使用这个 ...

  5. mvc api 返回json

    GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear(); }

  6. squid-nginx 基本配置

    #本地绑定的IP端口 http_port 192.168.1.253:801 vhost visible_hostname test-squid cache_dir ufs c:/squid/cach ...

  7. 转:django 接收页面form的post数组

    <input type="text" name="input[]"> <input type="text" name=&q ...

  8. 终于搞定office 2013中文双引号无法匹配问题啦！！！

    设计>>字体>>自定义字体>>所有字体改为宋体>>保存>>点击字体确认当前字体是自己刚新建的>>点击旁边设为默认值>> ...

  9. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  10. 课堂 表单验证 JavaScript js

    页面加载完才开始执行代码要加上 window.onload = function{ } 获取元素节点 var uesrname = document.getElementById("user ...