如何用帖子电饭煲制作视频播放器
<style>.showBox { font-size: 18px; font-family: '微软雅黑', sans-serif; }
.showBox p { margin: 10px 0; }
.showBox code, .showBox pre { background: #eee; padding: 2px 6px; tab-size: 4; }
.showBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.showBox pre code { padding: 0; background: none; }
</style>
<div class="showBox">
<p>帖子电饭煲当前版本不支持直接将视频设置为音频控制器，需要在电饭煲生成的HTML代码中下手。方法也简单，介绍如下：</p>
<p>假设所制作的帖子有视频背景，那么，可将视频指令完整复制，在该指令的下一行粘贴，结果大概如下：</p>
<pre><code>tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
</code></pre>
<p>然后在第二行视频代码修改两个地方：一是<code>pd-vid</code> → <code>vid</code>，二是<code>背景视频地址</code> → <code>小播视频地址</code>，并在句末分号前添加指令<code>.playmp3()</code>。改完后大概是这样：</p>
<pre><code>tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
tz.add('video', '', 'vid', {src: '小播视频地址'}).playmp3();
</code></pre>
<p>改完后的视频指令复制一下，这样后续切换子页面后再生成HTML代码时重新粘贴回来。</p>
<p>当然需要一个配套的<code>.vid {}</code>CSS选择器，用于设置视频的大小、位置等，该选择器在配套的CSS文件中已经存在，不用从头到尾写样式，仅需要写关键的部分，例如：</p>
<pre><code>.vid { width: 200px; height: 200px; bottom: 70px; cursor: pointer; }
</code></pre>
<p>这里，宽高都设置为200px，位置放在底部70px处，鼠标指针是手型。可以根据需要增添不同的CSS属性值。这个 <code>.vid {}</code> 选择器放在“帖子容器”子页面的“自定义CSS”栏目中即可。需要注意的是，前面修改的小播视频代码在重新生成代码时会丢失，记得在原视频指令代码的下一行另起一行、粘贴。</p>
<p>假设帖子不需要视频背景，那么，可以直接在“视频”子页面制作视频小播，方法也简单：点选“视频来源”为“其它”，电饭煲会自动加上<code>class="vid"</code>；填好视频地址；如果“帖子容器”子页面为设置“自定义CSS”，可以在这里的“相关CSS”填写上宽高等CSS代码，否则该项目可以留空；最后切换到HTML代码页面后找到视频指令，在句末分号前补上<code>.playmp3()</code>。</p>
<p>不论用上述两种方法中的哪一种，都要注意：一、只要切换过子页面，重新生成的代码都不包含在HTML子页面所做的修改，修改的地方注意复制以便重新生成代码后补上；二、img或div小播如果不需要，则必须手动删除最终形成的HTML代码对应指令行，即<code>tz.add('img（或div）',....).playmp3();</code>那一行。</p>
<p>建议操纵代码能力稍好的朋友在生成最终代码后再做相应操作，操作步骤无非就是两个：其一，添加 <code>.vid</code> 选择器或给视频小播设置 style 属性，其二，给视频小播加上 <code>.playmp3</code> 链式指令。</p>
</div> 谢谢黑黑老师再次造福小白。问好！{:4_187:} 简洁明了，富有操作性，谢谢马老师{:4_191:} 感谢马老师的解析指点，辛苦了，新春快乐！{:4_204:}{:4_190:}{:4_199:}
霜染枫丹 发表于 2026-2-27 15:36
感谢马老师的解析指点，辛苦了，新春快乐！
{:4_190:} 杨帆 发表于 2026-2-27 14:47
简洁明了，富有操作性，谢谢马老师
{:4_190:} 梦江南 发表于 2026-2-27 13:56
谢谢黑黑老师再次造福小白。问好！
{:4_190:} 难怪那天我那个视频播放器小播就是不成功，后来直接套用黑黑的源码了 小辣椒 发表于 2026-2-27 22:06
难怪那天我那个视频播放器小播就是不成功，后来直接套用黑黑的源码了
这些基础的东东要慢慢学会 这个把视频做小播讲得很详细，黑黑辛苦了{:4_187:} 红影 发表于 2026-2-28 22:04
这个把视频做小播讲得很详细，黑黑辛苦了
{:4_191:} 黑黑，你这个上面的
tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
加二个视频连接和
tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
tz.add('video', '', 'vid', {src: '小播视频地址'}).playmp3();
我测试了三次视频小播都没有成功{:4_198:}
小辣椒 发表于 2026-3-1 18:07
黑黑，你这个上面的
tz.add('video', '', 'pd-vid', {src: '背景视频地址'});
tz.add('video', '', 'pd-v ...
这个应该是简单的操作，按说明弄一下就好。你需要细读说明，不要走马观花式地浏览。
要点：
（一）指令语法正确，不能有差错，可以按 F12 查看报错的是什么；
（二）视频地址要正确；
（三）CSS配套样式表名称和视频中指令中使用的选择器要对上号（vid）；
（四）最后预览前，确保视频小播代码中有没有 .playmp3() 链式指令。 黑黑这个你发过实例吗？我歌词也是加不上去 小辣椒 发表于 2026-3-1 22:13
黑黑这个你发过实例吗？我歌词也是加不上去
我这些天的帖子都用电饭煲制作，预览后复制代码，有必要时加上其它东东，没必要时直接发帖。
页:
[1]