十三、在帖子中使用视频媒体
十三、在帖子中使用视频媒体
随着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来进行物理位置的移位。
随着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来进行物理位置的移位。
前一篇: 十二、在帖子中使用音频媒体(二)
下一篇: 【阿依莫】响应式圆环频谱(解说)
发表评论:
评论列表 [0条]