姜建华 -《红梅》随想曲(二胡协奏曲) 18'33''

凡哥

凡哥

帖子代码（测试代码请另开新帖）

1. <style>
   
2.     #tiezi { position: relative; margin: 20px auto; width: 960px; height: 540px; }
   
3.     #tiezi:hover #player { filter: drop-shadow(0 0 32px yellow) opacity(1); }
   
4.     #vc { position: absolute; left: 0; top: 0; background: lightblue; border: 1px solid gray; box-shadow: 2px 2px 4px gray; }
   
5.     #vid { opacity: 0; }
   
6.     #player { position: absolute; left: 20px; top: 20px; cursor: pointer; filter: drop-shadow(0 0 16px lightblue) opacity(.5); animation: rot 8s linear infinite var(--state); transition: filter 2s; }
   
7.     @keyframes rot { to { transform: rotate(1turn); } }
   
8. </style>
   
9. 
   
10. <div id="tiezi">
    
11.     <video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/06/5b50061d0cd10.mp4" loop muted></video>
    
12.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=252879" autoplay loop></audio>
    
13.     <canvas id="vc" width="960" height="540"></canvas>
    
14.     <img id="player" src="https://638183.freep.cn/638183/t23/btn/plum.png" alt="" title="播放/暂停" />
    
15. </div>
    
16. 
    
17. <script>
    
18. var ctx = vc.getContext('2d');
    
19. var ww = vc.width, hh = vc.height;
    
20. var raf = null;
    
21. 
    
22. aud.onplaying = aud.onpause = () => {
    
23.     aud.paused ? vid.pause() : vid.play();
    
24.     tiezi.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
25.     vDraw();
    
26. };
    
27. 
    
28. aud.onseeked = () => cancelAnimationFrame(raf);
    
29. 
    
30. var vDraw = () => {
    
31.     ctx.drawImage(vid, 0, 0, ww, hh, 0, -45, ww, hh + 45);
    
32.     aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(vDraw);
    
33. };
    
34. 
    
35. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. 
    
37. </script>

复制代码

半山雨

厉害！

令狐冲

凡哥这视频做的极美
音乐舒缓真好听。。。

凡哥

令狐冲 发表于 2024-5-23 10:05
凡哥这视频做的极美
音乐舒缓真好听。。。

代码极简

凡哥

半山雨 发表于 2024-5-23 08:10
厉害！

中午好

花简静

画布加视频，右键存图可以截取保存任意一个动画画面。。

花简静

鼠标触碰转动的小播，
可以变色加黄色光晕~~
控制停止画面，音乐，小播转动。。

花简静

代码又简单效果又漂亮。。

凡哥

花简静 发表于 2024-5-23 21:48
代码又简单效果又漂亮。。

感谢斑斑支持