1分钟内让你学会一镜到底

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

概念

一镜到底是一个影视界的术语，指用一个摄像机拍摄、在一个镜头内表现出整部影片的拍摄手法。

网页中的一镜到底，通常是指在页面中通过模仿镜头的拉伸，使得不同的画面元素陆续呈现在观众眼前的一种表现方式。因为其呈现效果与影视中的一镜到底十分相似，所以被称为“一镜到底”。

介绍

本期将会做一个仅仅用几行js代码就可以让video视频通过滑动屏幕播放起来，当然向下滚动是动画前进，向上滚动是动画后退，整个过程是连贯的，这样形成了最就基本的网页一镜到底效果。

我们先来康康效果吧：

请原谅我的中二病。我们本次案例将及其简短，但需要准备一个视频，接下来，我们就要开始了~

正文

<div id="app">
    <video id="video" src="./assets/bg.mp4" muted></video>
</div>
复制代码

html,body{
    width: 100%;
    background-color: #000000;
}
#app{
    width: 100%;
    height: 3000vh;
    position: relative;
    video{
        position: fixed;
        top: 0;
        left:0;
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
}
复制代码

html和css就只有那么多，我们先使用div#app造一个30屏的高度，然后下面的video用浮动定位，别忘了还要用 object-fit: cover将按其宽高比的同时填充满屏幕，裁切非中央像素。这样我们的视频就可以在我们的屏幕上展示了。但是现在拖动滚动条是不会播放的，因为我们还没有加js脚本控制他。

let video = document.getElementById("video");
window.addEventListener("scroll",function(e){
    const {scrollTop,scrollHeight,clientHeight} = document.documentElement;
    let scrolled = scrollTop / (scrollHeight-clientHeight);
    video.currentTime = video.duration * scrolled;
})
复制代码

其实就这几句就完成了通过滚动条控制视频的进度来完成一镜到底效果。我们监听scroll，拿到scrollTop当前滚动的距离，还有scrollHeight与clientHeight，我们将这两个值做差来取得滚动最大高度。这样一来两值相除，就可以当初当前页面滚动的进度值。这里因为我们只有一个视频所以可以将进度值与视频长度相乘，得出他当前的播放进度从而改变，就完成了改变滚动条来改变视频的目的。

当然，我们如果直接出滚动条也不是不太美观的，我们更期望的是将滚动条隐藏。

html,body{
    &::-webkit-scrollbar{
        display: none;
    }
}
复制代码

结语

我们本次是一个最基础的通过纯js控制video播放的案例来讲述的一镜到底，主要目的只是认识一下，说白了就是用滚动条来做出一条时间线去控制页面的元素，他可以是视频，可以是帧动画，可以是3D模型，可以svg动画等等，只有你想不到没有做不到的，本身也是为了用户能沉浸式浏览网页的一种做法。工作中我们多会用gsap的时间线插件去控制实现，当然，后面会抽时间安排更多案例等待大家去学习一镜到底。尽情期待~