增加视频循环迭代

时间：2018-07-20 08:54:08

标签： javascript jquery html css video

我当时正在着陆视频部分，该视频在后台播放视频，根据视频，有些文本会根据视频时间而相对于视频发生变化。文本动画使用关键帧。我已经可以使用了，但是我停留在一个点上，即循环播放时延迟了。

在窗口加载（视频开始）时一切正常，但是当视频结束并重新开始循环时，视频在循环后重新启动大约需要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>

2 个答案:

答案 0 :(得分：1)

您可以使用animation-delay

延迟文本动画 
.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;
  animation-delay: 1s;
}

答案 1 :(得分：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>

相关问题
最新问题