额外的 div 容器打破了 html5 视频播放功能

Question

我刚刚为带有 h​​tml5 视频的流畅轮播创建了一个示例：https://codepen.io/anon/pen/PLvreP

在第一张幻灯片中，视频自动开始。在第二张幻灯片中，有一个额外的 div 容器包装了视频标签，并且自动播放不再起作用。

即使里面有额外的容器，我应该怎么做才能让它工作？

感谢您的支持！ 升

这是第二个不起作用的 html 标记的示例：

<div class="item video">
    <div>
      <video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00">
        <source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
      </video>
      <p class="caption">HTML 5 Video</p>
    </div>
  </div>

Answer 1

通过添加额外的 div，您将破坏选择要播放的视频的代码。在您的 playPauseVideo 函数中：

video = currentSlide.children("video").get(0);

现在，没有更多带有“视频”标签的子代，因为您的视频现在是 currentSlide div 的孙代。

调整您选择该视频元素的方式，这应该可以解决它

video = currentSlide.children("div").children("video").get(0);

或

video = currentSlide.find("video").get(0);

Updated codepen

编辑您的上一条评论：

不幸的是，我的网站没有任何影响，也没有显示错误。 我怎样才能找出错误可能在哪里？有没有发送的方法 记录到控制台？我已经找了好几个小时了

问题是，您正在选择视频，在调用播放/暂停之前，您正在测试它是否为空：

video = currentSlide.children("video").get(0);
if (video != null) {
  if (control === "play"){
    video.play();
  } else {
    video.pause();
  }
} 

因此，如果您想记录错误，可以添加 else 块并使用 console.error()

if (video != null) {
  if (control === "play"){
    video.play();
  } else {
    video.pause();
  }
} else {
   console.error("The video was not found");
}