如何用帖子电饭煲（播放器制作工具）制作竖排歌词 转自《马黑黑教程专版》

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=90986&pid=2529253&page=1&extra=#pid2529253

帖子电饭煲不直接支持竖排LRC歌词设置，要轻松实现歌词竖排，需要两个知识储备：

1️⃣CSS如何实现文本竖排

核心是 writing-mode 属性，值设为 vertical-rl 或 vertical-lr 就可以实现文本竖排，其中的 vertical 意为“垂直”，r 为“right 右”、l 为“left 左”之意，rl 表示自右向左、lr 是自左向右排列多行文本。另有 text-orientation 属性可以用了精确设置字符方向，值有 upright （直立）、 mixed （默认，西文平躺）和 sideways （字符侧向排列）可选。

如此，仅需设法设置 writing-mode 属性，需要时，辅以 text-orientation 属性控制字符方向即可实现歌词竖排。

2️⃣了解配套CSS文档LRC歌词标签的相关变量

这里所讨论的 .lrc {} 选择器都基于与歌词排版相关的内容。

第一个是 --rect: 0 100% 0 0; ，它用来设定歌词同步的走向，四个值分别指向“上右下左”分量，歌词同步默认走向是从左到右，所有右边分量值设为 100%，那么，竖排歌词应从上到下的同步走向，下分量值即第三个值设为100%、其余的设置为 0 就好。 第二个是 --border: 0 0 1px 0; ，这是边框设置，不想要同步边框设为 --border: 0; 即可，想要的话，也是按照“上右下左”的次序设置 1px 的位置，想要粗一点的1改为2或3都行。

如果启用歌词淡入效果，那么，不用去管上面的两个CSS变量，不需要，只需简单设置歌词竖排就可以了。

❓在哪儿加入上述设置

以下方法任选其一（不要重复操作）：

第一种：在电饭煲的LRC歌词子页面。在“定位+其它设置”小文本框添加如下代码（可根据实际需要进行增删，原有的其它代码保留）：

writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0;

第二种：在“帖子容器”子页面添加 .lrc 选择器：

.lrc { writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }

第三种：在生成的帖子代码子页面将上述代码添加到合适的地方。这个操作需要一点阅读和操作代码的能力，零代码基础的朋友也可以尝试，试几次就会了，尝试的方法是先通过子页面设置完成相关功能，然后切换到代码页面观察、研究，看看子页面的设置被组织成什么代码、放在什么地方。

【说明】本文所介绍的竖排歌词设置方法，均适用于帖子电饭煲 ES 版、高能版。

演示帖：外滩十八号 - 音乐沙龙 - 花潮论坛 - https://www.huachaowang.com/forum.php?mod=viewthread&tid=90987&extra=

admin

花潮论坛马黑教程专辑：https://www.huachaowang.com/forum.php?mod=viewthread&tid=90288&pid=2512305&page=1&extra=#pid2512305
马黑博客：https://mahei.ccccocccc.cc/

admin

如何用帖子电饭煲（播放器制作工具）制作视频播放器

帖子电饭煲当前版本不支持直接将视频设置为音频控制器，需要在电饭煲生成的HTML代码中下手。方法也简单，介绍如下：

假设所制作的帖子有视频背景，那么，可将视频指令完整复制，在该指令的下一行粘贴，结果大概如下：

tz.add('video', '', 'pd-vid', {src: '背景视频地址'});tz.add('video', '', 'pd-vid', {src: '背景视频地址'});

然后在第二行视频代码修改两个地方：一是pd-vid → vid，二是背景视频地址 → 小播视频地址，并在句末分号前添加指令.playmp3()。改完后大概是这样：

tz.add('video', '', 'pd-vid', {src: '背景视频地址'});tz.add('video', '', 'vid', {src: '小播视频地址'}).playmp3();

改完后的视频指令复制一下，这样后续切换子页面后再生成HTML代码时重新粘贴回来。

当然需要一个配套的.vid {}CSS选择器，用于设置视频的大小、位置等，该选择器在配套的CSS文件中已经存在，不用从头到尾写样式，仅需要写关键的部分，例如：

.vid { width: 200px; height: 200px; bottom: 70px; cursor: pointer; }

这里，宽高都设置为200px，位置放在底部70px处，鼠标指针是手型。可以根据需要增添不同的CSS属性值。这个 .vid {} 选择器放在“帖子容器”子页面的“自定义CSS”栏目中即可。需要注意的是，前面修改的小播视频代码在重新生成代码时会丢失，记得在原视频指令代码的下一行另起一行、粘贴。

假设帖子不需要视频背景，那么，可以直接在“视频”子页面制作视频小播，方法也简单：点选“视频来源”为“其它”，电饭煲会自动加上class="vid"；填好视频地址；如果“帖子容器”子页面为设置“自定义CSS”，可以在这里的“相关CSS”填写上宽高等CSS代码，否则该项目可以留空；最后切换到HTML代码页面后找到视频指令，在句末分号前补上.playmp3()。

不论用上述两种方法中的哪一种，都要注意：一、只要切换过子页面，重新生成的代码都不包含在HTML子页面所做的修改，修改的地方注意复制以便重新生成代码后补上；二、img或div小播如果不需要，则必须手动删除最终形成的HTML代码对应指令行，即tz.add('img（或div）',....).playmp3();那一行。

建议操纵代码能力稍好的朋友在生成最终代码后再做相应操作，操作步骤无非就是两个：其一，添加 .vid 选择器或给视频小播设置 style 属性，其二，给视频小播加上 .playmp3 链式指令。