附加 div 容器中断 html5 视频播放功能

Question

我刚刚创建了一个带有 html5 个视频的精美轮播示例：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);

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

调整您选择该视频元素的方式，这应该会修复它

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

或

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

Updated codepen

编辑您最后的评论：

Unfortunately there is no effect on my website and no errors shown. How can I find out where the error could be? Is there a method to send logs to the console? I already searching for many hours

事实是，您正在选择您的视频并在调用 play/pause 之前测试它是否为空：

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");
}

附加 div 容器中断 html5 视频播放功能

Additional div container breaks html5 video play function

javascript

html5-video

slick.js