本帖最后由 马黑黑 于 2024-3-16 10:30 编辑
帖子代码
<style>
#papa {
margin: 20px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/1/purple.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1000;
}
#btnplay {
position: absolute;
left: 10px;
top: 10px;
width: 80px;
height: 80px;
transition: 5s;
cursor: pointer;
opacity: .9;
animation: rot 6s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 50%;
object-fit: cover;
mix-blend-mode: lighten;
opacity: .2;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1379294032" autoplay loop></audio>
<video src="https://img3.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" loop muted></video>
<img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="点击播放" />
</div>
<script>
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#papa',
css: '--bg: transparent; --color: #ccc; bottom: 10px; left: 48%;',
go: {x: true, y: true}
});
})();
</script>
fsgo.ji 使用和配置方法在帖子代码中的 44 ~ 52 行。约定:
一、帖子容器要有id,并按 49 行配置id标识符:papa: '#papa';
二、播放器按钮要有id,且id名只能是 btnplay(看 39 行);
三、50 行是全屏按钮的 CSS 设置,可以不设置,如果不设置,删掉这一行,如果设置,四个值最好一同存在;
四、51 行是 go 对象设置,用于设置播放按钮跟随,若不需要某一个方向的,将相应值改为 false 即可。
本论坛下,全屏时,播放器相应鼠标悬停有瑕疵,在我的网站其表现完美,大家可以去看看:
http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1710473894
此外,我专门在 Discuss! X3.4 下测试过,插件也表现完美。在此论坛为何如此,暂时找不出原因。 |