javascript - 增加视频循环迭代

Question

我正在制作一个着陆视频部分，该部分有一个在后台播放的视频，根据视频，有些文本会根据视频时间发生变化。文本动画使用关键帧。我已经让它工作了，但我被困在一个点上，即循环时延迟。

在窗口加载(视频开始)时一切正常，但是当视频结束并开始回到循环时，视频在循环后重新启动大约有 1 秒或几分之一秒的延迟。 “这是我的实际问题”，当视频重新开始时，关键帧延迟中的文本更改并将其迭代计数设置为无限。文字与第二次视频不匹配。当我在该部分停留一分钟时，视频与文本幻灯片不匹配。

有什么方法可以用 CSS 或 jQuery 来延迟动画，当视频第二次开始循环时，文本会延迟。

这是 Codepen link

下面是我正在处理的代码。

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
  position: absolute;
  left: 0;
  right: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.header-section .first {
  animation-name: anim-1;
}

.header-section .second {
  animation-name: anim-2;
}

.header-section .third {
  animation-name: anim-3;
}

.header-section .fourth {
  animation-name: anim-4;
}

@keyframes anim-1 {
  0%,
  8% {
    opacity: 0;
    top: 54%;
  }
  8%,
  16% {
    bottom: 25%;
    top: 54%;
    opacity: 1;
  }
  25%,
  100% {
    bottom: 50%;
    top: 25%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%,
  25% {
    opacity: 0;
  }
  32%,
  40% {
    bottom: 25%;
    opacity: 1;
  }
  50%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%,
  50% {
    opacity: 0;
  }
  58%,
  66% {
    bottom: 25%;
    opacity: 1;
  }
  75%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-4 {
  0%,
  75% {
    opacity: 0;
  }
  81%,
  92% {
    bottom: 25%;
    opacity: 1;
  }
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>

Answer 1

您可以通过在每次视频开始新循环时重新启动整个动画来非常简单地实现它。

要检测此事件，您可以监听媒体事件 onplaying .
要重新启动动画，您可以在父元素上设置一个类(例如 .playing)，它会告诉动画何时应该激活，然后删除这个类和 force a reflow从而使浏览器停用动画，最终将播放类退回。

var header = document.querySelector('.header-section');
myVideo.onplaying = function(e) {
  header.classList.remove('playing'); // deactivate the animation
  header.offsetWidth; // force a reflow
  header.classList.add('playing'); // reactivate the animation
} 

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
  position: absolute;
  left: 0;
  right: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* The animation is set only when the parent has the .playing class */
.header-section.playing .first {
  animation-name: anim-1;
}

.header-section.playing .second {
  animation-name: anim-2;
}

.header-section.playing .third {
  animation-name: anim-3;
}

.header-section.playing .fourth {
  animation-name: anim-4;
}

@keyframes anim-1 {
  0%,
  8% {
    opacity: 0;
    top: 54%;
  }
  8%,
  16% {
    bottom: 25%;
    top: 54%;
    opacity: 1;
  }
  25%,
  100% {
    bottom: 50%;
    top: 25%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%,
  25% {
    opacity: 0;
  }
  32%,
  40% {
    bottom: 25%;
    opacity: 1;
  }
  50%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%,
  50% {
    opacity: 0;
  }
  58%,
  66% {
    bottom: 25%;
    opacity: 1;
  }
  75%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-4 {
  0%,
  75% {
    opacity: 0;
  }
  81%,
  92% {
    bottom: 25%;
    opacity: 1;
  }
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>

关于改变一切的评论(即你需要暂停和播放功能)，那么最好的可能是完全摆脱 CSS 动画，并从 js 控制你的元素(借助 CSS 转换) :

var header = document.querySelector('.header-section');
var chapters = [0, 0.96, 1.92, 2.9, 4.2, 5.4, 6.5, 7.2, 9, 11];
var classes = ['', 'first-in', 'first-out', 'second-in', 'second-out', 'third-in', 'third-out', 'fourth-in', 'fourth-out', ''];

var currentFrame = 0;
myVideo.ontimeupdate = function() {
  var nextFrame = (currentFrame + 1) % chapters.length;
  if(myVideo.currentTime >= chapters[nextFrame] || myVideo.currentTime < chapters[currentFrame]) {
//    if(classes[currentFrame]) header.classList.remove(classes[currentFrame]);
    if(classes[nextFrame]) header.classList.add(classes[nextFrame]);
    currentFrame = nextFrame;
    if(!nextFrame) // did loop
      classes.forEach(remove);
    header.offsetTop;
  }

};
function remove(classname) {
  if(classname)header.classList.remove(classname);
}

onclick = function(e) {
  if(myVideo.paused) myVideo.play();
  else myVideo.pause();
}

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .as-main-excerpt {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    top: 54%;
    transition-property: opacity bottom top;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    
}

.header-section.first-in .first,
  .header-section.second-in .second,
  .header-section.third-in .third,
  .header-section.fourth-in .fourth {
    bottom: 25%;
    top: 54%;
    opacity: 1;
}
.header-section.first-out .first,
  .header-section.second-out .second,
  .header-section.third-out .third,
  .header-section.fourth-out .fourth {
    bottom: 50%;
    top: 25%;
    opacity: 0;
}
video {
  pointer-events: none;
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section playing">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>