tzMaker中级教程五

马黑黑 · 发表于 2025-11-16 10:33

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本讲谈谈在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处理：

上例，除了 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', '类名', {配置}) 的第三个参数指明它。