jquery - 隐藏 brightcove 视频并启动链接的点击

Question

我的网站和移动设备上有一个 Brightcove 视频集成我想隐藏视频，然后当用户单击链接时，它应该打开视频并开始播放。

HTML

<div id="video_player"><!-- brightcove player goes here --></div>
<script>
    BCL.addPlayer('video_player', '2327273222001');<!-- 'id' of target div, Brightcove Asset ID -->
</script>
<a class="test" onClick="" href="#">Test</a>

http://machinas.com/wip/hugoboss/brightcove/

是否有捷径可寻？

Answer 1

使用 CSS 隐藏视频播放器，然后在test单击锚点时显示视频播放器并初始化它（如果尚未显示）。

假设这addPlayer是同步的，您可以在play之后立即调用该方法。如果它不是同步的，那么您需要将回调函数传递给调用 play 方法的 addPlayer。

CSS

#video_player {
    display: none;
}

jQuery

$('a.test').on('click', function(e) {
    var vidPlayer = $('#video_player');

    if(!vidPlayer.is(':visible')) {
        vidPlayer.show();
        BCL.addPlayer('video_player', '2327273222001');<!-- 'id' of target div, Brightcove Asset ID -->   
        brightcove.play(); //assumes your Brightcove variable is named brightcove
    }
    e.preventDefault();
});

Answer 2

根据您应该使用的 Brightcove 文档或除隐藏之外的任何其他方法，您不应该使用display:none;来隐藏您的视频。left:-9999px;

此外，除非用户先单击播放按钮，否则您无法使用 JS 播放视频。然后，您可以务实地播放、暂停和更改视频。