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

问题描述

现在我正在尝试制作一个在视频上显示信息的滚动捕捉部分。当用户向下滚动时，我需要播放视频，并且会弹出与它相关的 html。我创建了一个完整的页面布局，它可以在各个方面工作，但视频在向下和向上滚动时播放。

现在我正在尝试使用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 q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}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>

标签： javascripthtmlcss

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

问题描述

解决方案

推荐阅读