遗失的风景

马黑黑 · 发表于 2023-3-27 07:57

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-3-27 07:58

帖子代码

<style>
#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa::after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 130px;
height: 80px;
background: linear-gradient(40deg, #eee 40%, #898989 50%);
filter: drop-shadow(0px 0px 8px #444);
}
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#vid { display: none; }
#mplayer {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border: 2px solid var(--bd);
border-radius: 50%;
box-shadow: 0 0 10px var(--sd);
transition: .7s;
cursor: pointer;
display: grid;
place-items: center;
z-index: 2;
--play: 1; --pause: 0; --bd: #435D03; --sd: white;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: var(--bd);
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent var(--bd);
opacity: var(--play);
}
#mplayer::after {
width: 2px;
height: 16px;
border-width: 0 4px 0 4px;
opacity: var(--pause);
}
#mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1366016806" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/3670683/00/02/00/5b4edd64165f5.mp4" poster="https://638183.freep.cn/638183/t23/webp/yufj.webp" loop muted></video>
<script>
(function () {
let ctx = canv.getContext('2d'), pic = new Image();
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
pic.src = vid.poster;
pic.onload = () => ctx.drawImage(pic,0,0,ww,hh);
let mState = () => aud.paused ? vid.pause() : vid.play();
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}};
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

复制代码

马黑黑 · 发表于 2023-3-27 08:11

本帖机制：

一个视频+一幅来自视频的图片，全在 video 标签里（72行）。video 标签有一个 poster 属性，就是视频的海报，即视频还没有播放前的首图。使用首图的用意在于兼容不开启视频自动播放的浏览器，若访问者的浏览器确实不支持视频的自动播放，则呈现poster海报画面，访问者会因之对视频感兴趣，就会点击播放按钮。

为此，canvas画布第一件要做的事情是将poster海报画面绘制出来（80行），绘制之前要有一些必要的准备（77、78、79行），这些准备有一部分也为后面绘制视频而做。

画布是整个帖子的主呈现场景，视频标签没有在帖子上出现，它在后台发力，将视频内容投射到画布之上。

音频在帖子中是独立存在的，而且它很重要，视频是否投影到画布上，根据的是音频标签的运行状态。