【凡哥教程第二十讲作业】视频色相转换程序（CSS filter滤镜）

柒玥

静静的作业很漂亮的说

柒玥

问好静静，辛苦啦。周末快乐

柒玥

学习学习在学习，活到老学到老

凡哥

最终效果是满足要求的，但是做了很多多余的工作。filter滤镜可以直接作用于 video 标签，无需通过父容器来传达，作业也明确要求调节视频色相。更改后的代码如下：

<style>
#vid {
    width: 400px;
    height: 400px;
    object-fit: cover;
    filter: hue-rotate(0deg); 
    border-radius: 50%;
}
</style>
 
<p><video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/32/5b55d3a4260ea.mp4" autoplay loop muted></video></p>
<p><output id="msg">filter: hue-rotate(0deg);</output></p>
<p><input id="range" type="range" min="0" max="360" value="0" /></p>
 
<script>
range.oninput = () => {
    msg.value = 'filter: hue-rotate(' + range.value + 'deg);';
    vid.style.filter = 'hue-rotate(' + range.value + 'deg)';
};
</script>

凡哥

楼上，HTML代码中，视频、输出框、滑杆等标签头尾都用 <p>...</p> 标签，这是因为这些标签都是行内标签，不放在段落标签的话它们会连在一起可能不好看

花简静

filter: hue-rotate(0deg);

花简静

凡哥 发表于 2024-8-9 12:54
最终效果是满足要求的，但是做了很多多余的工作。filter滤镜可以直接作用于 video 标签，无需通过父容器来 ...

看了一下，这个代码简单多了啊。。。
一个VID直接达到要求。。
HTML部分，三个并列。。
JS相关部分也进行了更改

太好了，我再进行一下对比，才知道应该怎么简炼

花简静

柒玥 发表于 2024-8-9 11:36
静静的作业很漂亮的说

抱个柒玥

花简静

柒玥 发表于 2024-8-9 11:36
问好静静，辛苦啦。周末快乐

周末快乐。。

花简静

凡哥 发表于 2024-8-9 13:03
楼上，HTML代码中，视频、输出框、滑杆等标签头尾都用 ... 标签，这是因为这些标签都是行内标签，不放在段 ...

视 频用得多，
输出框和滑杆头一次用，啊啊啊，
以前就是老师在制作小工具的时候有用到，
现在自己居然也在用了。感觉好神奇。。

三个都用头尾都用 <p>...</p> 标签包起来，这也是个技巧。记住了