当“标签”处于活动状态时播放视频/音频？答案

【问题标题】：Play video/audio when "tabs" are active?当“标签”处于活动状态时播放视频/音频？
【发布时间】：2014-07-12 21:54:56
【问题描述】：

我正在使用一个创建全屏幻灯片的插件 (http://alvarotrigo.com/fullPage/)。单击幻灯片的相关菜单项时，会将“活动”类添加到幻灯片。我希望该操作触发每张幻灯片的音频和视频。

我的 HTML 是：

<div id="fullpage"> 
    <section class="section" id="one">
        <img src="img/logo.png" class="logo" />
    </section>  

    <section class="section" id="two">
        <video class="autoplay"> 
            <source src="media/intro-01.webm" type="video/webm"></source>
            <source src="media/intro-01.mp4" type="video/mp4"></source>
        </video>
    </section>
</div>

我试过的 Javascript 是：

$(document).ready(function() {
   if($('section#two').hasClass("active")){
        $("video.autoplay").trigger("play");    
   };
});

当插件将活动类放在该部分上时，它不会开始播放视频。我很困惑，似乎找不到太多信息。任何想法或帮助将不胜感激。

【问题讨论】：

标签： jquery html5-video html5-audio autoplay

【解决方案1】：

那是因为您没有观察事件，它仅在页面加载时执行。

我查看了文档，有一个afterLoad 事件在元素被滚动到时触发。使用它。

$('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
        if(index == 2){
            $("video.autoplay").trigger("play");    
        }
    }
});

【讨论】：