修改 HTML5 中 video 样式

前几天收到一个需求,要实现一个背景视频播放的效果,在网上找了几个解决方案。

video.js

这是一起封装非常好的JS库了,可以实现非常棒的效果,一个效果图:

不过在我发现这个库之前,前人已经用了原生的<video>实现了,所以要在原生的基础上做修改。

显示 shadow DOM

要想自定义样式,需要先把浏览器的 shadow DOM 开启,开启方式如图:

打开之后就可以看到webkit内核对video的默认显示样式了

几个常用的控制样式

video::-webkit-media-controls-panel

video::-webkit-media-controls-play-button

video::-webkit-media-controls-volume-slider-container

video::-webkit-media-controls-volume-slider

video::-webkit-media-controls-mute-button

video::-webkit-media-controls-timeline

video::-webkit-media-controls-current-time-display

video::-webkit-full-page-media::-webkit-media-controls-panel

video::-webkit-media-controls-timeline-container

video::-webkit-media-controls-time-remaining-display

video::-webkit-media-controls-seek-back-button

video::-webkit-media-controls-seek-forward-button

video::-webkit-media-controls-fullscreen-button

video::-webkit-media-controls-rewind-button

video::-webkit-media-controls-return-to-realtime-button

video::-webkit-media-controls-toggle-closed-captions-button

具体看字面意思应该就可以理解了,这是不做赘述了。

一个不算总结的后话

当前的解决方案其实更偏向移动端,在IE上还需要特殊写样式来HACK,要跨浏览器还是推荐使用框架来实现~

 标签: HTML5, 前端开发

作者  :  sailor

一蓑烟雨看苍生,半壶浊酒笑红尘



最新文章