本讲谈谈在tzMaker中如何使用视频。
相较于粒子系统,视频的表现力更为丰富、细腻,用好视频可以提升帖子的品质。使用 tzMaker 模块给帖子添加视频很简单,使用 add() 指令添加 <video> 标签,在加入时给出class名、src值即可。试看:
tz.add('video', '', 'qk-vid', { src: '视频地址' });
第一个参数 video 是视频的标签;第二个参数留空,是视频标签的id;第三个参数是视频标签的class名称,其作用之一是使用CSS预定义的视频层叠样式,上例使用的CSS类选择器指向CSS设置好的 .qk-vid {},这个选择器是 tz.*.css 预设好的,它设置了视频自适应帖子容器的尺寸、带一定透明度、遮挡视频中央的Logo,类似的选择器还有 .pd-vid {},最新更新的 tz.v3.css 还带一个 .vid {} 选择器,不带遮罩和透明度;第四个参数是配置参数,可以在这里以键值对的方式设置视频的地址和其它的标签属性。
video标签有很多属性可以设置,模块默认将其设为无控制面板、自动播放、循环播放、静音。如果需要,可以重设这些设置并添加其它的属性设置。下面列出常用的video标签属性:
tz.add('video', '', '', {
autoplay: true | false, /* 自动播放,缺省默认 true */
controls: true | false, /* 显示控制面板,缺省默认 false */
height: 600, /* 视频宽度,缺省默认自适应容器高 */
loop: true | false, /* 循环播放,缺省默认 true */
muted: true | false, /* 静音,缺省默认 ture */
poster: '图片地址', /* 海报帧图片 */
preload: 'none | auto | metadata', /* 预加载方式 */
src: '视频地址', /* */
width: 900, /* 视频宽度,缺省默认自适应容器宽 */
});
视频如果是作为帖子的装饰,则无需配置上述全部的 video 的标签属性,可根据需要选择少量属性即可,其中,src 属性必须,没有它视频无法加载和播放。
如果仅使用 tzMaker 发布视频,因为视频的播放暂停是和tzMaker对音频的管理机制相关联的,没了音频视频就无法自动播放,故而得给视频设置相关属性。下面是单独发布视频的tzMaker应用实例,没有去除Logo处理:
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { --offsetX: 0px; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
const tz = TZ.TZ('pa');
tz.add('video', '', 'vid', {
src: 'https://img.tukuppt.com/video_show/09/06/80/613871f3cb2d8.mp4',
muted: false,
controls: true,
poster: 'https://638183.freep.cn/638183/Pic/38/dj1.jpg',
autoplay: false
});
</script>
上例,除了 src 属性,还设置了 muted 属性为 false,把静音给关了,因为模块默认开静音;controls 属性设为 true 是为了交互需要:单独发视频没有音频联动管理视频的功能,需要额外提供视频的交互界面以方便观者对视频进行播放、暂停、调节进度等相关操作;poster 属性是视频海报,它是否会实际渲染取决于两个因素:一是视频不能立马播放,需要等待下载,这个过程海报帧会先显示出来安抚观者,二是没有设置自动播放(autoplay: false),若如此,在观者点击视频本体或播放按钮之前,视频上的画面一直都是海报帧图片。
注意一下上例代码的 video class,即 add() 指令代码的第三个参数,使用的是 vid,对应于CSS预设样式的 .vid{} 选择器,这在 tz.v3.css 中自带,如果所使用的CSS文档是以前的版本,则需要在帖子的CSS代码部分加入如下选择器设置代码:
.vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
上面的 .vid 选择器代码可以写成一行,可以添加其它必要的属性设置——一切取决于设计需求。
小结:作为中级教程,tzMaker的这一讲是相对轻松的,需要掌握的是视频是帖子修饰辅助用途还是单独发布,视频做帖子装饰用时使用默认配置即可,若是单独发布视频,需要做一些简单配置工作,同时注意CSS视频样式的配套设置,例如使用最新的CSS文档,或者自己在帖子CSS代码块中设计视频的类选择器然后在加入视频指令 add('标签名', 'id', '类名', {配置}) 的第三个参数指明它。