1. 效果演示
2. 大概原理
获取网页滚动数据，将数据处理后设置为视频的currentTime值
3. 源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>视频背景控帧播放</title>
<style>
body {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
display: none
}
.container {
position: fixed;
min-width: 1300px;
min-height: 732px;
z-index: -1;
}
.videoBack {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.scrollContent {
text-align: center;
color: white;
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<video class="videoBack" preload="auto" muted>
<source src="bv86.mp4" type="video/mp4"/>
</video>
</div>
<div class="scrollContent">
豫章故郡，洪都新府。<p/>星分翼轸，地接衡庐。<p/>襟三江而带五湖，控蛮荆而引瓯越。<p/>
物华天宝，龙光射牛斗之墟；<p/>人杰地灵，徐孺下陈蕃之榻。<p/>
雄州雾列，俊采星驰。<p/>台隍枕夷夏之交，宾主尽东南之美。<p/>都督阎公之雅望，棨戟遥临；<p/>宇文新州之懿范，襜帷暂驻。<p/>
十旬休假，胜友如云；<p/>千里逢迎，高朋满座。<p/>腾蛟起凤，孟学士之词宗；<p/>紫电青霜，王将军之武库。<p/>家君作宰，路出名区；<p/>
童子何知，躬逢胜饯。<p/>时维九月，序属三秋。<p/>潦水尽而寒潭清，烟光凝而暮山紫。<p/>俨骖騑于上路，访风景于崇阿。<p/>
临帝子之长洲，得天人之旧馆。<p/>层峦耸翠，上出重霄；<p/>飞阁流丹，下临无地。<p/>鹤汀凫渚，穷岛屿之萦回；<p/>桂殿兰宫，即冈峦之体势。<p/>
披绣闼，俯雕甍，山原旷其盈视，`川泽纡其骇瞩`。<p/>闾阎扑地，钟鸣鼎食之家；<p/>舸舰弥津，青雀黄龙之舳。<p/>云销雨霁，彩彻区明。<p/>
落霞与孤鹜齐飞，秋水共长天一色。<p/>渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。<p/>
遥襟甫畅，逸兴遄飞。<p/>爽籁发而清风生，纤歌凝而白云遏。<p/>睢园绿竹，气凌彭泽之樽；<p/>邺水朱华，光照临川之笔。<p/>
四美具，二难并。<p/>穷睇眄于中天，极娱游于暇日。<p/>天高地迥，觉宇宙之无穷；<p/>兴尽悲来，识盈虚之有数。<p/>
望长安于日下，目吴会于云间。<p/>地势极而南溟深，天柱高而北辰远。<p/>关山难越，谁悲失路之人；<p/>萍水相逢，尽是他乡之客。<p/>
怀帝阍而不见，奉宣室以何年？<p/>嗟乎！时运不齐，命途多舛。<p/>冯唐易老，李广难封。<p/>
屈贾谊于长沙，非无圣主；<p/>窜梁鸿于海曲，岂乏明时？<p/>
所赖君子见机，达人知命。<p/>老当益壮，宁移白首之心？<p/>穷且益坚，不坠青云之志。<p/>酌贪泉而觉爽，处涸辙以犹欢。<p/>
北海虽赊，扶摇可接；<p/>东隅已逝，桑榆非晚。<p/>孟尝高洁，空余报国之情；<p/>阮籍猖狂，岂效穷途之哭！<p/>
勃，三尺微命，一介书生。<p/>无路请缨，等终军之弱冠；<p/>有怀投笔，慕宗悫之长风。<p/>舍簪笏于百龄，奉晨昏于万里。<p/>
非谢家之宝树，接孟氏之芳邻。<p/>他日趋庭，叨陪鲤对；<p/>今兹捧袂，喜托龙门。<p/>杨意不逢，抚凌云而自惜；<p/>钟期既遇，奏流水以何惭？<p/>
呜呼！胜地不常，盛筵难再；<p/>兰亭已矣，梓泽丘墟。<p/>临别赠言，幸承恩于伟饯；<p/>登高作赋，是所望于群公。<p/>敢竭鄙怀，恭疏短引；<p/>
一言均赋，四韵俱成。<p/>请洒潘江，各倾陆海云尔：<p/>
滕王高阁临江渚，佩玉鸣鸾罢歌舞。<p/>
画栋朝飞南浦云，珠帘暮卷西山雨。<p/>
闲云潭影日悠悠，物换星移几度秋。<p/>
阁中帝子今何在？槛外长江空自流。<p/>
</div>
<script>
let container = document.querySelector(".container");
let videoBack = document.querySelector('.videoBack');
let parameters = {
lookWidth: 3440,
lookHeight: 1440,
}
window.addEventListener('resize', toResize);
toResize();
window.addEventListener('scroll', toScroll);
videoBack.onloadeddata = () => {
toScroll();
}
function toResize() {
parameters.lookWidth = window.innerWidth;
parameters.lookHeight = window.innerHeight;
container.style.width = parameters.lookWidth + 'px';
container.style.height = parameters.lookHeight + 'px';
}
function toScroll() {
let duration = videoBack.duration || 0;
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
// 根据滚动位置来控制视频播放
videoBack.currentTime = scrollPosition / (document.body.clientHeight - parameters.lookHeight) * duration;
}
</script>
</body>
</html>
