本帖最后由 马黑黑 于 2024-2-29 12:12 编辑
关于纯音乐帖子JS独立资源
iy-btn-fs JS独立模块适用于纯音乐或不带lrc歌词的帖子。它由播放控制器+全屏两个部分组成,两个按钮可以是任意可视元素,约定播放控制器id="btnplay",全屏按钮id="btnFs",此外,帖子父元素约定id="papa"(是不是传说中的约法三章)。模块的主要功能是控制音频和视频播放暂停,同时提供全屏控制开关并接管CSS的 --state 变量。使用时请参照如下帖子代码结构:
<style>
#papa { position: relative; }
#btnplay { position: absolute; }
#btnFs { position: absolute; }
</style>
<div id="papa">
<audio src="音频地址"></audio>
<!-- video src="视频地址" muted loop></video -->
<div id="btnFs">全屏观赏</div>
<div id="btnplay"></div>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/iy-fs-btn.js';
document.querySelector('body').appendChild(sF);
</script>
上述代码:
JS部分是调用资源。
HTML部分,音频和视频可以不要id,web页里的第一个 audio 是JS模块管理的对象,页面中的所有视频也都将接受管理,视频是否静音(muted)根据需要决定,循环播放(loop)必须,自动播放(autoplay)不建议;代码中,video标签处于注释状态,使用时自行修改;id="papa"的div是帖子元素,其id是全屏的操控依赖;全屏按钮和播放按钮必须使用示范代码设置id,不论使用的是div还是img或其他的。
CSS部分,对应HTML标签设计,这里仅列出position定位属性,按父元素relative子元素absolute的方式设置,以方便帖子布局;#btnplay 以及其他选择器,如果调用关键帧动画属性 animation 设置有 var(--state),则它们控制下的动画将能与音频的播放暂停同步。
|