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

遗失的风景

<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 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行），这些准备有一部分也为后面绘制视频而做。

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

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

马黑黑 发表于 2023-3-27 08:16

至于帖子右上角的卷角设计，你懂的，是将视频的logo遮掩起来。穷人办公穷开心，白嫖省钱过日子没点小心计美滋滋不起来哒。

红影 发表于 2023-3-27 10:23

video 标签有一个 poster 属性，就是视频的海报。
这个标签又是第一次看到呢{:4_187:}

红影 发表于 2023-3-27 10:25

马黑黑 发表于 2023-3-27 08:16
至于帖子右上角的卷角设计，你懂的，是将视频的logo遮掩起来。穷人办公穷开心，白嫖省钱过日子没点小心计美 ...

一进来就看到了这个小的折页效果，看得笑{:4_173:}

红影 发表于 2023-3-27 10:27

鹰飞鱼跃，好美。黑黑又把这个小而美的播放器做成了实例帖子{:4_187:}

马黑黑 发表于 2023-3-27 12:04

红影 发表于 2023-3-27 10:27
鹰飞鱼跃，好美。黑黑又把这个小而美的播放器做成了实例帖子

它在那边已经是实例了，这里只是安插在帖子里

马黑黑 发表于 2023-3-27 12:05

红影 发表于 2023-3-27 10:23
video 标签有一个 poster 属性，就是视频的海报。
这个标签又是第一次看到呢
video标签不是第一次看到，是它的 poster 属性，之前一直都不使用

马黑黑 发表于 2023-3-27 12:06

红影 发表于 2023-3-27 10:25
一进来就看到了这个小的折页效果，看得笑

设计精妙吧

小辣椒 发表于 2023-3-27 13:42

马黑黑 发表于 2023-3-27 08:16
至于帖子右上角的卷角设计，你懂的，是将视频的logo遮掩起来。穷人办公穷开心，白嫖省钱过日子没点小心计美 ...

{:4_170:}

土豪为穷人用心机了

小辣椒 发表于 2023-3-27 13:44

黑黑这教程速度太快了，我今天稍微看了一下，作业拉下一大堆了{:4_198:}

马黑黑 发表于 2023-3-27 17:21

小辣椒 发表于 2023-3-27 13:44
黑黑这教程速度太快了，我今天稍微看了一下，作业拉下一大堆了

都大同小异吧

马黑黑 发表于 2023-3-27 17:22

小辣椒 发表于 2023-3-27 13:42
土豪为穷人用心机了

{:4_203:}

小辣椒 发表于 2023-3-27 17:26

马黑黑 发表于 2023-3-27 17:21
都大同小异吧

反正都没有做的

小辣椒 发表于 2023-3-27 17:27

马黑黑 发表于 2023-3-27 17:22


用词不当{:4_170:}

土豪为穷人精打细算了

雨中悄然 发表于 2023-3-27 17:58

绝美风景迷人之极

马黑黑 发表于 2023-3-27 18:10

雨中悄然 发表于 2023-3-27 17:58
绝美风景迷人之极

视频的动态设计还不是很理想

马黑黑 发表于 2023-3-27 18:10

小辣椒 发表于 2023-3-27 17:27
用词不当

土豪为穷人精打细算了

{:4_172:}

马黑黑 发表于 2023-3-27 18:16

小辣椒 发表于 2023-3-27 17:26
反正都没有做的

中意哪一个有空了做做就好
页: [1] 2 3 4 5
查看完整版本: 遗失的风景