“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”
随着计算机网络和多媒体技术的飞速发展，视频作为富媒体的主要元素，成为了信息传递的主要方式，深刻地影响着我们的生活。在互联网流量中，尤其是移动互联网中，视频流媒体的占比已经超过 70% 甚至更多。但是由于视频先关技术（如编解码、流媒体传输等）入门门槛较高，导致从事视频行业的高端人才数量无法满足行业的发展需要。（引用自《FFmpeg 从入门到精通》）
专栏初衷
这是《JSer搞视频制作》系列专栏的第一篇文章，这个专栏目的是记录从 JSer 角度研究视频制作程序化的过程，致力于让视频制作自动化、批量化、智能化。
第一篇，先从离前端工程师最近的和视频有关的 HTML 标签 <video> 开始，一步一步走近视频技术的世界。
Hello World
照例，先来一段 Hello World:
关于 <video> 标签的更多标准内容，这里就不再做搬运了，不了解的读者可以直接翻 video 相关 MDN 文档。
样式优化
看完 MDN 文档之后，相信大家应该有了个整体印象，下面我们利用前端工程师最擅长的技能对<video>标签来点花里胡哨美观大方的样式优化。
video 伪元素选择器
在进行样式优化之前，可以熟悉下我们可以利用的现有工具——一些 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
不过，下面的大部分利用这些选择器进行的样式优化可能只在 Chrom 浏览器正常。所以推荐使用 Chrom 来查看。
自定义播放按钮样式
自定义音量调节条样式
自定义静音按钮样式
自定义时间轴样式
自定义时间戳样式
自定义全屏按钮样式
以上就是对于 <video> 标签的基础介绍以及关于样式优化的一些选择器的展示，在下一节将会一步一步实现一个自己的播放器。
点赞后在评论区回复“666”，获取视频内测邀请码。
