在 Drupal 7 中单击下一个按钮时停止当前视频的播放

Question

我正在使用版本drupal 7创建“幻灯片”来显示视频的幻灯片，每个视频都嵌入在其自己的内容项中。

当用户开始播放视频时，如果视频仍在播放，单击“下一步”，幻灯片将前进到下一张幻灯片，但上一张幻灯片的视频不会停止播放（所有浏览器）。然后，用户可以点击播放下一个视频，然后两个视频将同时播放。如果用户前进到下一张幻灯片，他们可以开始播放第三个同步视频，依此类推。当用户单击“下一步”转到下一张幻灯片时，我想停止当前正在播放的任何视频。

有人可以提供一些简单的代码来防止不同幻灯片上的多个视频同时播放吗？

这是我的视频 HTML 代码：

<video class="video-test" style="width:96%;padding-left:6%;" controls>
  <source src="./sites/default/files/MyGovUC 2 0.mp4" type="video/mp4">
</video>

我尝试使用下面的js但不起作用。

$('.video_test').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  player.pause();
});

我的前端结果如下图所示：

谢谢您的帮助。

Answer 1

您希望

afterChange

事件在 slide 更改（而不是视频）时触发处理程序，因此您需要选择 slick 元素。然后在处理程序中，您可以暂停所有（或仅那些与您的选择器匹配的）视频：

$('#<slick_id>').on('afterChange', function() {
  $('.video_test').each(function() {
    this.pause();
  });
});