十三、在帖子中使用视频媒体


随着HTML的发展，Adobe未能从根本上同步解决Flash存在的安全漏洞问题，Flash已不被现代浏览器所支持，彻底退出了web舞台。HTML5则增添一个 video 标签，指定了播放视频的标准规范，用法上它与音频标签 audio 极为相似，其界面同样提供了播放、暂停、音量等交互控制按钮用以控制视频。


HTML5 video 标签缩写性代码语句：


<video id="vid" src="视频地址" control="controls" autoplay="autoplay" loop="loop"></video>


其中，id 为自定义标签标识，src 接受视频文件，controls设定按钮可见，autoplay 为自动播放，loop 规定了循环播放，与 audio 标签的参数基本一模一样。


video控件支持的视频格式不止 MPEG4（即MP4）一种，常见的还有 WebM、ogg 等。


当然，作为视频处理控件，video拥有更多的属性设置，可能会用到的有：


poster - 视频封面，没有播放时显示的图片（poster="图片URL"）
muted - 静音设置（muted="muted"）
preload - 预加载设置（preload="none|metadata|auto"，缺省值 auto 自动全预加载）
width - 宽度（width="800px"）
height - 高度（height="600px"）


CSS3对video的样式制定，除了常规的尺寸设置、定位、边框、阴影等之外，还有一个特殊的设置：


object-fit: cover;


它能保证视频的内容充满其预设的尺寸，除非视频源的制作的怪异的。


当视频用作背景参与修饰帖子，我们需要在CSS里给它设定一个合适的opacity值：


opacity: 0.65;


opacity用于设置可视元素的不透明度，为 0 时完全透明（用于视频是视频内容不可见），为 1 时完全不透明（用于视频时视频完全遮挡其背后的内容）。根据情况，我们可能还需要将视频进行定位，建议使用绝对定位，然后通过设置left和top来进行物理位置的移位。

前一篇: 十二、在帖子中使用音频媒体（二）
下一篇: 【阿依莫】响应式圆环频谱（解说）