Question

我有一个带有自动播放背景视频的页面。在此页面上，有一个用于打开视频灯箱的链接。我希望在点击打开灯箱的链接后暂停背景视频，但我似乎无法弄明白。当我点击它时，我可以让背景视频暂停，但是当我点击灯箱的链接时却不能。我使用的是fullpage.js和html5lightbox。

HTML：

<div class="section" id="section1" data-anchor="1stPage">
    <video autoplay loop muted id="bgVideo" >
    <source src="_media/web_intro.mp4" type="video/mp4">
    <source src="" type="video/ogg">
    </video>

    <div id="introText">
        <h1>Movie-style storytelling for business</h1>
        <h2>Here to save you from yet another deck</h2>
        <div id="box">
            <a href="_media/trailer.mp4" data-ogg="_media/trailer.theora.ogv" class="html5lightbox"><i>highlight reel</i></a>
        </div>
    </div>

</div>

SCRIPT：

$('#bgVideo').click(function(){this.paused?this.play():this.pause();});

Answer 1

使用委托或在fullPage.js的afterRender回调中添加您的代码，详见文档：

<强> AfterRender阶段（）
在生成页面结构之后立即触发此回调。这是您想要用来初始化其他插件或者激活任何需要文档准备好的代码的回调（因为这个插件会修改DOM以创建结果结构）。

宽度授权：

$(document).on('click', '#bgVideo', function(){
    this.paused?this.play():this.pause();
});

回调：

$('#fullpage').({
    //...  whatever options you have
    afterRender: function(){
        $('#bgVideo').click(function(){this.paused?this.play():this.pause();});
    }
})

灯箱打开时暂停背景视频

1 个答案: