在图像上触发Brightcove视频播放，当视频完成时单击并隐藏它
在图像上触发Brightcove视频播放，当视频完成时单击并隐藏它
提问于 2013-10-28 12:18:12
我试图播放一个视频点击图像，并隐藏当视频完成，到目前为止，我有这样一个结构：
<a href="#">
<div style="display:none"></div>
<div class="overlay_play_big"></div>
<div class="overlay_label">
<span class="title">Bones</span><br />
<span class="desc">Season 8, Episode 19</span>
</div>
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at https://accounts.brightcove.com/en/terms-and-conditions/.
-->
<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience2768811593001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="470" />
<param name="height" value="292" />
<param name="playerID" value="2764056952001" />
<param name="playerKey" value="AQ~~,AAACg0nERbk~,bDrRQnHHnTJYYUzl4RqDhsPQ_y-ladJF" />
<param name="isVid" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="onTemplateLoaded" />
<param name="templateReadyHandler" value="onTemplateReady" />
<param name="@videoPlayer" value="2768811593001" />
</object>
<script type="text/javascript">
var player, modVP;
function onTemplateLoaded(experienceID) {
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
}
function onTemplateReady(evt) {
modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onComplete);
}
function onComplete(evt) {
alert("Video ended");
}
</script>
<!--
This script tag will cause the Brightcove Players defined above it to be created as soon
as the line is read by the browser. If you wish to have the player instantiated only after
the rest of the HTML is processed and the page load is complete, remove the line.
-->
<script type="text/javascript">brightcove.createExperiences();</script>
<!-- End of Brightcove Player -->
</a>我想在点击overlay_play_big div时触发视频播放。我正在使用Brightcove，但即使是这个简单的警报也无法工作。视频结束后什么也没发生。我怎么能这样做，还是我犯了一个错误？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-28 12:43:09
下面的代码将如预期的那样工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Player Event Tester</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<div id="player" style="float: left">
<object id="myExperience1754261637001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="2549948545001" />
<param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreVadKjzdyJfLcfukyXcGqB" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="myTemplateLoaded" />
<param name="templateReadyHandler" value="onTemplateReady">
<param name="@videoPlayer" value="1754261637001" />
</object>
<div>
<button id="changeVideo" onclick="changeVideo()">Change Video</button>
<div class="overlay_play_big">Play</div>
</div>
</div>
<script type="text/javascript">
brightcove.createExperiences();
</script>
<div id="log" style="float: left">
<div id="positionLog"></div>
<div id="eventLog"></div>
</div>
<script>
var myTemplateLoaded, onTemplateReady, player, modVP, modExp, modCon, previousVideoID=0, currentVideo, videosToSwap=new Array(1754261637001,1754261438001); //videos we will swap
myTemplateLoaded = function (experienceID) {
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
}
onTemplateReady = function (evt) {
modVP.getCurrentVideo(function (dto) {
});
modVP.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.CHANGE, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.ERROR, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.PROGRESS, onMediaProgressFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.STOP, onMediaEventFired);
}
function onMediaEventFired(evt) {
document.getElementById("eventLog").innerHTML += "MEDIA EVENT: " + evt.type + " fired at position: " + evt.position + "<BR>";
if (evt.type === "mediaComplete") {
//changeVideo();
alert('ended');
}
}
function onMediaProgressFired(evt) {
document.getElementById("positionLog").innerHTML = "CURRENT POSITION: " + evt.position;
}
function changeVideo() {
modVP.getCurrentVideo(currentVideoCallback);
}
function currentVideoCallback(currentVideo) {
document.getElementById("positionLog").innerHTML = "";
document.getElementById("eventLog").innerHTML = "";
if (currentVideo.id == videosToSwap[0]) {
modVP.loadVideoByID(videosToSwap[1]);
} else {
modVP.loadVideoByID(videosToSwap[0]);
}
}
$('.overlay_play_big').on('click',function(){
modVP.play();
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19634625
复制相关文章
相似问题
腾讯云开发者
