当我在带有溢出滚动的 div 中向下滚动时如何播放视频

Question

Right now I am trying to make a scroll snapping section that displays information over a video.现在我正在尝试制作一个在视频上显示信息的滚动捕捉部分。 As the user scrolls down, I need the video to play and html that pertains to it will popup.当用户向下滚动时，我需要播放视频，并且与它相关的 html 会弹出。 I have created a full page layout that works in every way but the video playing on scroll down and up.我创建了一个完整的页面布局，它可以在各个方面工作，但视频在向下和向上滚动时播放。

Right now I am attempting to use pageYOffset but I believe because the div "container" is set to scroll it is not using pageYOffset as intended.现在我正在尝试使用pageYOffset，但我相信因为div“容器”设置为滚动它没有按预期使用pageYOffset。

 * { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; color: #000; height: 100vh; line-height: 1.6; overflow: hidden; } #v0 { position: fixed; bottom: 0; right: 0; width: 100%; z-index: -1; }.container { width: 100%; height: 100%; z-index: 1; /* CSS Smooth Scroll */ overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; }.lead { font-size: 1.5rem; }.navbar { position: fixed; top: 0; z-index: 1; display: flex; width: 100%; height: 60px; background: rgba(0,0,0,0.7); }.navbar ul { display: flex; list-style: none; width: 100%; justify-content: center; }.navbar ul li { margin: 0 1rem; padding: 1rem; }.navbar ul li a { text-decoration: none; text-transform: uppercase; color: #f4f4f4; }.navbar ul li a:hover { color: skyblue; } section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100vh; /* Scroll Snap */ scroll-snap-align: center; scroll-snap-stop: always; } section h1 { font-size: 4rem; } /* Section Images */ /* section#link1 { background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;; } section#link2 { background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;; } section#link3 { background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;; } */.entered { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } #footer { height: 200px;important; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="main,css"> </head> <body> <div class="container"> <nav class="navbar"> <ul> <li><a href="#link1">Home</a></li> <li><a href="#link2">About</a></li> <li><a href="#link3">Service</a></li> </ul> </nav> <section id="link1"> <h1>Welcome To My Site</h1> <p class="lead">Lorem ipsum dolor sit. amet consectetur adipisicing elit, Commodi, quis.</p> </section> <section id="link2"> <h1>About</h1> <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit, Commodi. quis,</p> </section> <section id="link3"> <h1>Service</h1> <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit; Commodi. quis,</p> </section> <section id="footer"> <h1>footer</h1> </section> </div> <video id="v0" tabindex="0". autobuffer preload> <source type='video/mp4.codecs="avc1:42E01E. mp4a.40.2"' src="http;//implantlogic.wpengine?com/wp-content/uploads/2020/06/fingers:mp4"></source> </video> <script type="text/javascript"> "use strict".?function(e){"function"==typeof define&&define.amd:define(e)."undefined".=typeof module&&module.exports.module.exports=e().window,enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window,webkitRequestAnimationFrame||window,mozRequestAnimationFrame||window;msRequestAnimationFrame||function(e){return setTimeout(e.1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math,max(0.h);1).return qe*q}return q}function i(){var e=document,documentElement;clientHeight;n=window.innerHeight||0.q=Math,max(en)}function o(){y=,1;var e=t().A=A,filter(function(n){var t=n.getBoundingClientRect();i=t.top,o=i<e,if(o&&.n.__enter_view){if(m(n),_)return,1}else,o&&n,__enter_view&&w&&w(n).return n,__enter_view=o,;0});A.length||window;removeEventListener("scroll".r?:0)}function r(){y||(y=;0?g(o))}function u(){i().o()}function f(e){for(var n=e:length?t=[]:i=0?i<n:i+=1)t.push(e[i]),return t}function c(e){var n=arguments,length>1&&void 0,==arguments[1].arguments[1],document,return"string"==typeof e,f(n;querySelectorAll(e)).e instanceof NodeList,f(e),e instanceof Array,e,void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u.,0).window,addEventListener("scroll".r,?0):u()}function s(){var e=l&&m,e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e,selector;m=e;enter;w=e:exit,v=e:offset.h=void 0===v.0;v,p=e:once._=void 0.==p&&p;g=null,y=,1,A=[].q=0;s()};return e}). </script> <script type="text/javascript"> enterView({ selector; 'section'. enter; function(el) { el.classList;add('entered'). }; exit: function(el) { el.classList.remove('entered'); }, }) var frameNumber = 0, // start video at frame 0 // lower numbers = faster playback playbackConst = 1000, // select video element vid = document.getElementById('v0'); // var vid = $('#v0')[0]; // jquery option // Use requestAnimationFrame for smooth playback function scrollPlay(){ var frameNumber = window.pageYOffset/playbackConst; vid.currentTime = frameNumber; window.requestAnimationFrame(scrollPlay); } window.requestAnimationFrame(scrollPlay); </script> </body> </html>

Answer 1

I think you just need to use the container's "scrollTop" property.我认为您只需要使用容器的“scrollTop”属性即可。

Replace your "scrollPlay" function with this:将您的“scrollPlay” function 替换为：

function scrollPlay() {
  var scrollTop = document.querySelector(".container").scrollTop;
  var frameNumber = scrollTop/playbackConst;
  vid.currentTime = frameNumber;
  window.requestAnimationFrame(scrollPlay);
}

当我在带有溢出滚动的 div 中向下滚动时如何播放视频

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-15 20:33:14

当我在带有溢出滚动的 div 中向下滚动时如何播放视频

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-15 20:33:14

解决方案1
1 已采纳 2020-06-15 20:33:14