在父类更改时停止 HTML5 音频/视频

Posted 2023-02-25

【中文标题】在父类更改时停止 HTML5 音频/视频

【英文标题】：Stop HTML5 Audio/Video on Parent Class Change

【发布时间】：2016-04-04 14:26:22

【问题描述】：

我这里有一个 Slick Slider，它主要包含图像，但也包含音频和视频元素。

所有“幻灯片”在可见时，在使用生成的导航显示时都具有“slick-current”类。我需要帮助的问题是如何在幻灯片删除“slick-current”类时停止每张幻灯片中的音频和/或视频元素。

我知道如何用 jQuery 调用音频和视频元素，但是当一个类被删除时我不知道如何调用。

提前致谢。

【问题讨论】：

什么事件删除了类？随机点击？

对除当前类if (!$(AllSlidesSelector).hasClass("slick-current")) 的幻灯片以外的所有幻灯片执行操作？

有左右导航控制下一张和上一张幻灯片。

@theblackgigant，太棒了！但我该在何时何地称呼这个？我不希望它一直运行，对吗？

HOLD THE PHONE - 有一个 beforeChange API 回调可以让我检查幻灯片是否具有幻灯片当前类。我想这会解决我的问题。感谢大家一大早就让车轮滚动起来。

【参考方案1】：

不，据我所知，没有办法在“添加/删除 CSS 类”上进行事件。但是谈到http://kenwheeler.github.io/slick/ 的 Slick Slider，您可以在幻灯片即将更改时附加一个 onchange 事件。您可以使用 'beforechange' 或 'afterchange' 事件。

$('#slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) 
   // stop the video/audio inside currentSlide if you need to

【讨论】：

这是我发现的。但我在尝试在 currentSlide 中查找音频或视频元素时遇到问题。一个简单的currentSlide.find("audio").pause(); 给出错误currentSlide.find is not a function

因为 currentSlide 可能不是 jQuery 对象，试试 $(currentSlide).find('audio')?

和$(currentSlide).find("audio").pause(); 渲染和$(...).find(...).pause 的错误不是函数

currentSlide 和 nextSlide 正在访问轮播附加到每张幻灯片的幻灯片的 data-slick-index 属性。

试试这个 - $(currentSlide).find("audio")[0].pause();

【参考方案2】：

找到了！

使用为 beforeChange 记录的方法，我遇到了访问 currentSlide 内容的问题。所以我做了更多的挖掘，瞧：

if ($("[data-slick-index='" +currentSlide+ "']").find("audio").length > 0)      
     //turn off the audio

我可以用一个简单的 console.log 来测试它，如果幻灯片有音频元素，然后说“HAS AUDIO”。感谢@Ken-D-Timothy 帮助我。