隱藏brightcove視頻並啓動onClick的<a>鏈接

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方法。如果它不同步，則需要將回調函數傳遞給調用播放方法的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

你不應該使用display:none;隱藏你的視頻，根據Brightcove的文檔，你應該使用left:-9999px;或隱藏以外的任何其他方法。

此外，除非用戶首先單擊播放按鈕，否則您無法使用JS播放視頻。然後，您可以實際播放，暫停和更改視頻。