《勇往直前》（学习黑黑vc方式控制视频）

红影

红影

发现这个做法没法调整视屏大小？本来想随心放大的，看起来不行搞不清是怎么回事了@马黑黑

梦江南

哇，好棒！有气势！

梦江南

请教，您的图片是从什么地方上传的呢？

红影

梦江南 发表于 2024-5-25 14:25
哇，好棒！有气势！

谢谢梦江南鼓励，纯套用代码玩呢

红影

梦江南 发表于 2024-5-25 14:27
请教，您的图片是从什么地方上传的呢？

我一般 https://www.superbed.cn/ 传的。

马黑黑

红影 发表于 2024-5-25 12:03
发现这个做法没法调整视屏大小？本来想随心放大的，看起来不行搞不清是怎么回事了@马黑黑

问题的关键在于canvas画布的 drawImage 方法上。用它完整的参数来裁切一定尺寸的源、再绘制到完整画布上。drawImage() 方法及其参数解释：


    语法：

    drawImage(image, sx, sy, swidth, sheight, x, y, width, height);


    参数解释：

    drawImage(源, 源剪切点X坐标, 源剪切点Y坐标, 源剪切到的宽度, 源剪切到的高度, 画布开始绘制点X坐标, 画布开始绘制点Y坐标, 画布画到的宽度, 画布画到的高度);


你的帖子中，如果你希望帖子尺寸是 1024*640 的尺寸，那么，在CSS中设计好帖子容器的宽高，在HTML代码中将canvas画布的宽高设置成和帖子容器一致的尺寸。然后你需要知道视频的原始尺寸（每一个视频都有自己的原始尺寸，和图片一样的原理），如果你不知道，也可以动态获取，这需要增加两个变量用以存储视频的宽高尺寸和一个获取视频尺寸的方法，以下代码就是这么做的：

1. <style>
   
2.     #tiezi { position: relative; left: calc(50% - 81px); top: 60px; transform: translate(-50%); width: 1024px; height: 640px; }
   
3.     #vc { position: absolute; left: 0; top: 0; background: lightblue; border: 1px solid gray; box-shadow: 2px 2px 4px gray; }
   
4.     #vid { opacity: 0; }
   
5.     #player { position: absolute; left: 240px; top: 260px; cursor: pointer; filter: drop-shadow(0 0 16px lightblue) opacity(.99); animation: rot 2.2s linear infinite alternate var(--state); }
   
6.     @keyframes rot { from { opacity: 0.9; transform: rotate(0) skew(-5deg) translate(0,0); } to { opacity: 0.2; transform: rotate(-16deg) skew(5deg) translate(20px,0px); } }
   
7. </style>
   
8. 
   
9. <div id="tiezi">
   
10.     <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/22/5b5874e61640f.mp4" loop muted></video>
    
11.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992058764" autoplay loop></audio>
    
12.     <canvas id="vc" width="1024" height="640" style="border: 1px solid red"></canvas>
    
13.     <img id="player" src="https://pic.imgdb.cn/item/66515bced9c307b7e95991ce.png" alt="" title="播放/暂停" />
    
14. </div>
    
15. 
    
16. <script>
    
17. var ctx = vc.getContext('2d');
    
18. //ww和hh是画布的宽高，vw和vh是video实际宽高
    
19. var ww = vc.width, hh = vc.height, vw, vh;
    
20. var raf = null;
    
21. 
    
22. //视频可以播放时获取视频实际宽高尺寸
    
23. vid.oncanplay = () => {
    
24.         vw = vid.videoWidth;
    
25.         vh = vid.videoHeight;
    
26. };
    
27. 
    
28. aud.onplaying = aud.onpause = () => {
    
29.     aud.paused ? vid.pause() : vid.play();
    
30.     tiezi.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
31.     vDraw();
    
32. };
    
33. 
    
34. aud.onseeked = () => cancelAnimationFrame(raf);
    
35. 
    
36. var vDraw = () => {
    
37.         //绘制视频时裁切视频并绘制到完整画布尺寸上
    
38.     ctx.drawImage(vid, 0, 45, vw, vh - 45, 0, 0, ww, hh);
    
39.     aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(vDraw);
    
40. };
    
41. 
    
42. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
43. 
    
44. </script>

复制代码

南无月

影子这个贴子效果太震撼了
冲浪者角度和透明度这么设计一下，
在海浪的背景之下，冲浪的效果真是惟妙惟肖，
给影子精彩构思点赞！~~

南无月

每次看影子的贴子都能有不同的收获，代码灵活运用，贴子效果绝佳

南无月

马黑黑 发表于 2024-5-25 17:06
问题的关键在于canvas画布的 drawImage 方法上。用它完整的参数来裁切一定尺寸的源、再绘制到完整画布上 ...

弱弱的问一下老师，在#vc那句里添上transform: scale(1.3, 1.3);这个算不算放大了呢？

南无月

马黑黑 发表于 2024-5-25 17:06
问题的关键在于canvas画布的 drawImage 方法上。用它完整的参数来裁切一定尺寸的源、再绘制到完整画布上 ...

我在传图试贴第三页试了一下影子的贴子，结果把编辑给盖住了

马黑黑

南无月 发表于 2024-5-25 20:22
我在传图试贴第三页试了一下影子的贴子，结果把编辑给盖住了

你看看我的详细答复

马黑黑

南无月 发表于 2024-5-25 20:18
弱弱的问一下老师，在#vc那句里添上transform: scale(1.3, 1.3);这个算不算放大了呢？

这个就是放大的

南无月

马黑黑 发表于 2024-5-25 20:54
你看看我的详细答复

看了，加了19行的vw, vh;，
加了23——26行，vid.oncanplay = () => {
        vw = vid.videoWidth;
        vh = vid.videoHeight;
};

38行也变了
ctx.drawImage(vid, 0, 45, vw, vh - 45, 0, 0, ww, hh);

这动到JS的部分，加上老师的解说，小白我只看个隐隐约约，不是很明白

南无月

马黑黑 发表于 2024-5-25 20:54
这个就是放大的

那可就太好了。。
它盖编辑，也就是不怎么受控？

马黑黑

南无月 发表于 2024-5-25 21:03
看了，加了19行的vw, vh;，
加了23——26行，vid.oncanplay = () => {
        vw = vid.videoWidth;

完全明明白白需要一个过程，就像网上买买买需要交智商税一样的道理

马黑黑

南无月 发表于 2024-5-25 21:03
那可就太好了。。
它盖编辑，也就是不怎么受控？

试试看才知道是肿么回事

南无月

马黑黑 发表于 2024-5-25 21:04
完全明明白白需要一个过程，就像网上买买买需要交智商税一样的道理

我尽量尽量吧，现在就跟雨和印记那个模糊的图像似的。
得加个时间滤镜才清晰

南无月

马黑黑 发表于 2024-5-25 21:05
试试看才知道是肿么回事

反正试过了，能放大就算。。

马黑黑

南无月 发表于 2024-5-25 21:13
反正试过了，能放大就算。。

那挺好