tzMaker中级教程五
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>本讲谈谈在tzMaker中如何使用视频。</p>
<p>相较于粒子系统，视频的表现力更为丰富、细腻，用好视频可以提升帖子的品质。使用 tzMaker 模块给帖子添加视频很简单，使用 add() 指令添加 <video> 标签，在加入时给出class名、src值即可。试看：</p>
<div class="codebox">
tz.add('<txt-blue>video</txt-blue>', '', '<txt-blue>qk-vid</txt-blue>', { src: '<txt-blue>视频地址</txt-blue>' });
</div>
<p>第一个参数 video 是视频的标签；第二个参数留空，是视频标签的id；第三个参数是视频标签的class名称，其作用之一是使用CSS预定义的视频层叠样式，上例使用的CSS类选择器指向CSS设置好的 <mark>.qk-vid {}</mark>，这个选择器是 tz.*.css 预设好的，它设置了视频自适应帖子容器的尺寸、带一定透明度、遮挡视频中央的Logo，类似的选择器还有 .pd-vid {}，最新更新的 tz.v3.css 还带一个 .vid {} 选择器，不带遮罩和透明度；第四个参数是配置参数，可以在这里以键值对的方式设置视频的地址和其它的标签属性。</p>
<p>video标签有很多属性可以设置，模块默认将其设为无控制面板、自动播放、循环播放、静音。如果需要，可以重设这些设置并添加其它的属性设置。下面列出常用的video标签属性：</p>
<div class="codebox">
tz.add('video', '', '', <txt-red>{</txt-red>
autoplay: true | false, <txt-green>/* 自动播放，缺省默认 true */</txt-green>
controls: true | false, <txt-green>/* 显示控制面板，缺省默认 false */</txt-green>
height: 600, <txt-green>/* 视频宽度，缺省默认自适应容器高 */</txt-green>
loop: true | false, <txt-green>/* 循环播放，缺省默认 true */</txt-green>
muted: true | false, <txt-green>/* 静音，缺省默认 ture */</txt-green>
poster: '图片地址', <txt-green>/* 海报帧图片 */</txt-green>
preload: 'none | auto | metadata', <txt-green>/* 预加载方式 */</txt-green>
src: '视频地址', <txt-green>/**/</txt-green>
width: 900, <txt-green>/* 视频宽度，缺省默认自适应容器宽 */</txt-green>
<txt-red>}</txt-red>);
</div>
<p>视频如果是作为帖子的装饰，则无需配置上述全部的 video 的标签属性，可根据需要选择少量属性即可，其中，src 属性必须，没有它视频无法加载和播放。</p>
<p>如果仅使用 tzMaker 发布视频，因为视频的播放暂停是和tzMaker对音频的管理机制相关联的，没了音频视频就无法自动播放，故而得给视频设置相关属性。下面是单独发布视频的tzMaker应用实例，没有去除Logo处理：</p>
<div class="codebox" data-prev="1">
<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>
</div>
<p>上例，除了 src 属性，还设置了 muted 属性为 false，把静音给关了，因为模块默认开静音；controls 属性设为 true 是为了交互需要：单独发视频没有音频联动管理视频的功能，需要额外提供视频的交互界面以方便观者对视频进行播放、暂停、调节进度等相关操作；poster 属性是视频海报，它是否会实际渲染取决于两个因素：一是视频不能立马播放，需要等待下载，这个过程海报帧会先显示出来安抚观者，二是没有设置自动播放（autoplay: false），若如此，在观者点击视频本体或播放按钮之前，视频上的画面一直都是海报帧图片。</p>
<p>注意一下上例代码的 video class，即 add() 指令代码的第三个参数，使用的是 vid，对应于CSS预设样式的 .vid{} 选择器，这在 tz.v3.css 中自带，如果所使用的CSS文档是以前的版本，则需要在帖子的CSS代码部分加入如下选择器设置代码：</p>
<div class="codebox">
.vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
</div>
<p>上面的 .vid 选择器代码可以写成一行，可以添加其它必要的属性设置——一切取决于设计需求。</p>
<p>小结：作为中级教程，tzMaker的这一讲是相对轻松的，需要掌握的是视频是帖子修饰辅助用途还是单独发布，视频做帖子装饰用时使用默认配置即可，若是单独发布视频，需要做一些简单配置工作，同时注意CSS视频样式的配套设置，例如使用最新的CSS文档，或者自己在帖子CSS代码块中设计视频的类选择器然后在加入视频指令 <mark>add('标签名', 'id', '类名', {配置})</mark> 的第三个参数指明它。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 谢谢黑黑老师详细讲解，辛苦了！{:4_190:} 梦江南 发表于 2025-11-16 12:24
谢谢黑黑老师详细讲解，辛苦了！
{:4_190:} tzMaker还可以单独作为发视频使用，它功能那么全，也可取其中一功能单独使用，这个太厉害了{:4_199:} 这个“常用的video标签属性”的整理特别好，棕是在使用封装好的，对这些属性都快忘了{:4_199:} 其实在使用tzMaker时，视屏都被当做辅助作用了，很少用来单独发视频用的呢{:4_173:} 红影 发表于 2025-11-16 13:24
其实在使用tzMaker时，视屏都被当做辅助作用了，很少用来单独发视频用的呢
对，封装模块的时候就是这么设定的，所以视频是静音的
静音同时是允许自动播放的门槛，这是浏览器的一个策略，挺好玩的 好，在tzMaker中如何使用视频设了个专讲~谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-11-17 10:57
好，在tzMaker中如何使用视频设了个专讲~谢谢马老师精彩分享
这个视频其实更多的是基于<video>标签的诸多属性，弄清楚常用属性即可通过 add() 指令添加视频标签 马黑黑 发表于 2025-11-17 13:00
这个视频其实更多的是基于标签的诸多属性，弄清楚常用属性即可通过 add() 指令添加视频标签
是的，弄清视频标签的属性是前提
页:
[1]