在 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 事件在 幻灯片 更改（不是视频）时触发您的处理程序，因此您需要 select 光滑元素.然后在处理程序中，您可以暂停所有（或仅与您的 select 或匹配的视频）视频：

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

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

Stop the current video from playing when the next button is clicked in Drupal 7

video

drupal

slider

drupal-7