姜建华 - 《红梅》随想曲(二胡协奏曲) 18'33''
<style>#tiezi { position: relative; left: calc(50% - 81px); transform: translate(-50%); width: 960px; height: 540px; }
#tiezi:hover #player { filter: drop-shadow(0 0 32px yellow) opacity(1); }
#vc { position: absolute; left: 0; top: 0; background: lightblue; border: 1px solid gray; box-shadow: 2px 2px 4px gray; }
#vid { opacity: 0; }
#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; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/06/5b50061d0cd10.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=252879" autoplay loop></audio>
<canvas id="vc" width="960" height="540"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/plum.png" alt="" title="播放/暂停" />
</div>
<script>
var ctx = vc.getContext('2d');
var ww = vc.width, hh = vc.height;
var raf = null;
aud.onplaying = aud.onpause = () => {
aud.paused ? vid.pause() : vid.play();
tiezi.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vDraw();
};
aud.onseeked = () => cancelAnimationFrame(raf);
var vDraw = () => {
ctx.drawImage(vid, 0, 0, ww, hh, 0, -45, ww, hh + 45);
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(vDraw);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
帖子代码<style>
#tiezi { position: relative; left: calc(50% - 81px); transform: translate(-50%); width: 960px; height: 540px; }
#tiezi:hover #player { filter: drop-shadow(0 0 32px yellow) opacity(1); }
#vc { position: absolute; left: 0; top: 0; background: lightblue; border: 1px solid gray; box-shadow: 2px 2px 4px gray; }
#vid { opacity: 0; }
#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; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/06/5b50061d0cd10.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=252879" autoplay loop></audio>
<canvas id="vc" width="960" height="540"></canvas>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/plum.png" alt="" title="播放/暂停" />
</div>
<script>
var ctx = vc.getContext('2d');
var ww = vc.width, hh = vc.height;
var raf = null;
aud.onplaying = aud.onpause = () => {
aud.paused ? vid.pause() : vid.play();
tiezi.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vDraw();
};
aud.onseeked = () => cancelAnimationFrame(raf);
var vDraw = () => {
ctx.drawImage(vid, 0, 0, ww, hh, 0, -45, ww, hh + 45);
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(vDraw);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
亮眼，好听！{:4_176:} 用画布的方式来绘制和调整视频视频啊，这个好。{:4_199:} 都习惯了用内置的方式直接让视频暂停了，画布方式好，可以说明画布可以用截取帧的方式展示或暂停所有元素，无论是视频还是动图{:4_199:} 对于动图的暂停，我记得除了用第一帧静图来替代，还有画布能让它暂停在任何演示的瞬间，记得黑黑讲过的，这段时间忙，也没去翻之前的教学内容。今天的这个好，应该就可以实现动图的真正暂停了吧{:4_199:} 我说么，一上来看到#vid { opacity: 0; } ，还在想视频无法展示啊，原来它是被画出来的{:4_173:}
vc这个名称也取得好玩，很有用的维生素{:4_189:} 老师真棒！欣赏学习了！ 梦江南 发表于 2024-5-23 11:33
老师真棒！欣赏学习了！
简简单单的 红影 发表于 2024-5-23 09:39
我说么，一上来看到#vid { opacity: 0; } ，还在想视频无法展示啊，原来它是被画出来的
vc这个名 ...
v，video，c，canvas 红影 发表于 2024-5-23 09:35
对于动图的暂停，我记得除了用第一帧静图来替代，还有画布能让它暂停在任何演示的瞬间，记得黑黑讲过的，这 ...
gif是图形媒体中最特殊的存在，帧的播放不少控制。画布对付不了他，video也对付不了它 红影 发表于 2024-5-23 09:31
都习惯了用内置的方式直接让视频暂停了，画布方式好，可以说明画布可以用截取帧的方式展示或暂停所有元素， ...
其实都可以的。之所以用画布来渲染视频，无非就是想把视频隐藏起来，因为视频的交互性、可操作的能力较强，一些场景不希望如此 樵歌 发表于 2024-5-23 08:49
亮眼，好听！
{:4_191:} 看着代码极简单 ，一个视频加小播解决问题。。
画布上整视频，跟之前《胜利》那贴有烟花视频有点像，小播是个小天使 这个小播鼠标移上去可以变亮变色。加了黄色的光晕，好看。。
老师喜欢这种点击触动有变化的小播，敲一下就动，跟活了似的。。{:4_170:} 南无月 发表于 2024-5-23 12:23
看着代码极简单 ，一个视频加小播解决问题。。
画布上整视频，跟之前《胜利》那贴有烟花视频有点像，小播 ...
{:4_173:} 南无月 发表于 2024-5-23 12:24
这个小播鼠标移上去可以变亮变色。加了黄色的光晕，好看。。
老师喜欢这种点击触动有变化的小播，敲一下就 ...
这是跟敲黑板效果一样{:4_170:} 马黑黑 发表于 2024-5-23 12:06
{:4_176:}{:4_200:} 樵歌 发表于 2024-5-23 12:56
{:4_206:} 马黑黑 发表于 2024-5-23 12:02
v，video，c，canvas
哦哦，原来是取的首字母啊，我还以为是维生素呢{:4_173:}