• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  HTML5 audio、video原生样正文

HTML5 audio、video原生样式修改

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-11-12 10:12
分享到:
    audio和video的样式修改,一般都是重写界面,然后用js操作audio和video,这种方法的优点是界面定义更灵活,更美观,缺点是如果只想改一点点,比如video播放条颜色,而动手重新写,代价有点大。今天的这个方法可以直接定义html5 audio和video原生的样式。

    一般,我们写一个audio或者video标签,在谷歌界面只能看到一个标签,并且,只能定义大小,如下:



    但是,通过下面的方法,可以看到“更深层次”的video/audio:

    1、在谷歌控制台点击三个小点,选择“setting”:



    2、选择“Preferrences”,找到“Elements”下面的“Show user agent shadow DOM”,如下



    3、这时您就能看到video标签里面多了一个“#shadow-root(user-agent)”,如下



    4、点击展开它,就能看到video/audio的相关控制按钮等的容器了,当然,您就能用css选择器选中它们,进行个性化修改了:





5、如下面的代码,就能把video/audio的背景换成红色了:
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel{background:red;}

(责任编辑:网页模板)
  • 本文标签:
  • HTML5,audio,、,video,原生,样式,修改,audio,和,video,
关于audio的loadeddata事件在IOS不触发
column css3 详解