本帖最后由 花简静 于 2024-9-10 19:53 编辑
<style>
#tz {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/66dc0377d9c307b7e9bbb60e.jpg') no-repeat center/cover;
box-shadow: 4px 4px 8px #333;
z-index: 1;
position: relative;
}
#player {
--size: 160px;
--color: #029097;
position: relative;
left: calc(50% - var(--size) /0.32);
top: 540px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
opacity: .49;
animation: rot 8s linear infinite var(--state);
cursor: pointer;
}
#player::before, #player::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--color);
filter: drop-shadow(0 0 8px #000000);
}
#player::after { transform: rotate(90deg); }
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
opacity: .29;
-webkit-mask: linear-gradient(to left top, red 5%, transparent 85%, transparent);
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1331217821" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/26/15/54/19/video5fe6ec2bb3283.mp4" muted autoplay loop></video>
<div id="player" title="拖我"></div>
</div>
<script>
//变量 : 可拖曳、偏移量（小播尺寸的一半）、点击间隔时长
var draggable = false, offset = 80, time_delay = 0;
//引用全屏按钮插件+配置
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
papa: '#tz',
css: 'left: 35%; bottom: 20px; --fsBg: transparent; --color: white;',
});
//播放控件联动监听
aud.onplaying = aud.onpause = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
//小播左键按下 : 可以拖曳
player.onmousedown = (e) => {
if(e.button != 0) return;
time_delay = new Date().getTime();
draggable = true;
player.style.transition = '0s';
}
//小播左键弹起 : 点击或拖曳
player.onmouseup = (e) => {
if(e.button != 0) return;
time_delay = new Date().getTime() - time_delay;
if(time_delay < 200) aud.paused ? aud.play() : aud.pause();
time_delay = 0;
};
//帖子容器左键按下 : 拖曳
tz.onmousemove = (e) => {
if(!draggable) return;
var rt = tz.getBoundingClientRect();
let left = e.clientX - rt.left - offset, top = e.clientY - rt.top - offset;
if(left < 0) left = 0;
if(top < 0) top = 0;
if(left > rt.width - offset * 2) left = rt.width - offset * 2;
if(top > rt.height - offset * 2) top = rt.height - offset * 2;
player.style.cssText += `left: ${left}px; top: ${top}px;`;
};
document.onmouseup = () => draggable = false; //禁止拖曳
//窗口改变大小 : 小播复位
window.onresize = () => player.style.cssText += `left: calc(50% - var(--size) / 2); top: 20px; transition: .7s;`;
</script>
| 
