Hayit Murat《I Can't Say》
本帖最后由 醉美水芙蓉 于 2024-11-17 16:04 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 780px); width: 1400px; height:750px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5864d962445e49185bcfcc5bc48598de_preview.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#msvg { position: absolute; left: 25%; top: 28%; cursor: pointer; filter: drop-shadow(-5px -5px 10px black); animation: rot 8s linear infinite var(--state); }
#msvg:hover { filter: hue-rotate(160deg); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2107662999" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/04/09/15/41/16/video6614f11c2f29d.mp4" autoplay loop muted></video>
<svg id="msvg" width="300" height="300"></svg>
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
var tt = 9, r1 = 150, r2 = 145, deg = 360 / tt, rad = Math.PI / 180 * deg, pstr = 'M150 150';
var stop = `
<stop offset="0" stop-color="green" />
<stop offset="1" stop-color="green" />
`;
for(var i = 0; i < tt; i ++) {
var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}
dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd');
msvg.onclick = () => {
aud.paused
? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running'))
: (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'));
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
</script> 醉美水芙蓉 发表于 2024-11-16 21:36
你漏了 audio 音频标签 你的代码中看不到有 id="aud" 的标签，可能你通过第三方js播放音频，那样的话，js 中 aud 相关的语句是无效的，你需要拿到音频控制的标识用以取代 aud 相关语句 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 马黑黑 发表于 2024-11-16 22:57
你的代码中看不到有 id="aud" 的标签，可能你通过第三方js播放音频，那样的话，js 中 aud 相关的语句是无效 ...
谢谢老师光临指导！ 夕阳黄昏 发表于 2024-11-17 06:25
夕阳老师给我看看哪里出问题了？ 醉美水芙蓉 发表于 2024-11-17 07:03
夕阳老师给我看看哪里出问题了？
msvg.onclick = () => {
aud.paused
? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running'))
: (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'));
};
aud.play().catch(_ => mState());
醉美水芙蓉 发表于 2024-11-17 07:03
谢谢老师光临指导！
的确是通过第三方 JS 管控音频联动，若此，我的部分JS代码，比如 aud 相关的语句，拿不到 audio 音频标签的操作标识，所以管不动音频，应该删掉这类语句，转而通过第三方JS提供的方法管控音频联动机制。
多组来源不同的JS应用，它们需要合作，得有彼此能接受的接口。比方讲，如果想继续使用我的音频联动机制，拿到 audio 标签的操作标识符即可，就 audio 的 id 或别的什么，帖子就可以正常工作了。 看到这帖子里的https://xlaj.cn/……，忍不住说一句，这是小辣椒的付费空间的东西，她不希望有人未经许可拿去用，毕竟她是为了自己用才购买的空间，不想额外增加负担。 醉美水芙蓉 发表于 2024-11-17 11:35
谢谢红影美女提醒！我不要这个素材，忘记删除了！
别人的空间上传最好不要随便用，你不是第一次用我的，岁月的链接也是付费空间，最近因为他一直在忙，前段时间我也是玩的少，等我发现告诉他，流量超出已经超过15天时效，这个空间上传的东西统统被删除了，因为有的人不是就发花潮，别人看见喜欢也是用了，这样流量就大，流量是要付费的，付点钱算了，一个不注意超出15天就会被空间商删除的，所以这次岁月是毁灭性的打击，我只是告诉你这个道理。 小辣椒 发表于 2024-11-17 12:41
别人的空间上传最好不要随便用，你不是第一次用我的，岁月的链接也是付费空间，最近因为他一直在忙，前段 ...
谢谢小辣椒告知！ 马黑黑 发表于 2024-11-17 07:38
的确是通过第三方 JS 管控音频联动，若此，我的部分JS代码，比如 aud 相关的语句，拿不到 audio 音频标签 ...
再次感谢黑黑老师耐心讲解！ 红影 发表于 2024-11-17 09:24
看到这帖子里的https://xlaj.cn/……，忍不住说一句，这是小辣椒的付费空间的东西，她不希望有人未经许可拿 ...
谢谢红影美女提醒！我不要这个素材，忘记删除了！ 醉美水芙蓉 发表于 2024-11-17 16:10
谢谢红影美女提醒！我不要这个素材，忘记删除了！
以前你用到外头的时候，小辣椒就私下和我说了，这次正好看到，所以想起来这事{:4_204:}
页:
[1]