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

