0
我試圖在點擊時隱藏圖片並顯示Brightcove視頻。一旦顯示，我無法播放視頻。對圖片點擊隱藏圖片並播放brightcove視頻
這裏是撥弄我的例子創建：http://jsfiddle.net/u9yvv/
這裏是我的HTML和JavaScript：
<div class="js-container container">
<div class="content">
<div class="figure">
<img src="http://placekitten.com/200/100" alt="Image of a kitten" />
</div>
<a href="#" class="js-trigger trigger">View Video</a>
</div>
<!-- Start of Brightcove Player -->
<object id="myExperience921449663001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="100%" />
<param name="height" value="auto" />
<param name="playerID" value="2079935931001" />
<param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WE0z3yX6Xw29sdCvkH5GCJv" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="921449663001" />
<!-- smart player api params -->
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="onTemplateLoad" />
<param name="templateReadyHandler" value="onTemplateReady" />
</object>
<script type="text/javascript">brightcove.createExperiences();</script>
</div>
的JavaScript：
var player,
modVP;
var onTemplateLoad = function (experienceID) {
// get references to the player and API Modules and Events
console.log('onTemplateLoad has loaded');
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
};
// template ready event handler
var onTemplateReady = function (evt) {
console.log('onTemplateReady is ready');
modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
};
$('.js-trigger').on('click', function(event) {
//event.preventDefault();
$('.content').css({ 'display' : 'none'});
$('.BrightcoveExperience').css({ 'position' : 'static'});
modVP.play(); //I thought this would make the video play.
});
我不知道如何讓視頻一旦顯示就播放。