javascript - 单击图像时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏-6ren

javascript - 单击图像时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏

转载作者：行者123 更新时间：2023-11-29 19:46:03

25

4

我正在尝试在点击图片时播放视频并在视频播放完毕后将其隐藏，到目前为止我的结构如下:

<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 API，但即使是这个简单的警报也不起作用。视频结束，什么也没有发生。我该怎么做，或者我是否犯了错误？

最佳答案

下面的代码将按预期工作..

<!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>

关于javascript - 单击图像时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19634625/

25

4

0

文章推荐： android - Firebase Android 查询不返回任何结果

文章推荐： javascript - 如何从保留换行符的 window.prompt() 返回文本？

Brightcove 视频缩略图
假设我有视频 ID，我可以访问视频的静止图像吗？我已经阅读了媒体 API 和缩略图 URL 和 videoStillURL 的读取函数，但不知道如何实现。是否有使用给定 ID 的 Assets 的
javascript - Brightcove:转到视频中的特定时间
我正在使用Brightcove但是，对于我的视频，我需要能够单击一系列按钮来转到视频中的特定时间戳。我已经找到了如何深层链接( https://support.brightcove.com/deep
javascript - Brightcove 视频模板加载处理程序未触发
好吧，整个下午我都在为 BrightCove API 苦苦挣扎，我真的不知道哪里出了问题。我遵循了 Brightcove 提供的所有内容，并为智能播放器启用了 javascript api。但是 t
ios - Brightcove 库不断使应用程序崩溃
我已经在我的 iOS 应用程序中实现了 brightcove 库 4.2.1。我的应用程序崩溃了: self.player = [[BCOVPlayerSDKManager sharedManage
javascript - Brightcove HTML5风格定制
我应该使用什么来自定义 HTML5 视频播放器(添加自己的按钮，添加 css 样式)？现在我们使用javascript插件，但有时这些插件会在Iframe DOM之前加载。您能为我们提供一个可用于确定
javascript - Brightcove 视频对移动设备上的方向变化没有响应
我的网站上有一个 Brightcove 视频。我的网站是响应式的，因此我希望播放器也应该响应式。现在，我已经浏览了 Brightcove 文档中关于“视频播放器的响应式大小调整”的内容。这是链接: h
javascript - 恢复或设置 Brightcove 视频的开始时间
我正在使用 Brightcove 播放器 http://docs.brightcove.com/en/video-cloud/smart-player-api/用 Angular 来做一个弹出视频。我
javascript - 如何创建一个没有控件的完全空白的 Brightcove 播放器模板？
我正在尝试加载一个 Brightcove 视频，当在 iPad 上加载 HTML5 版本时，它完全没有控件(例如:播放/暂停、进度条、音量)并且只是播放视频。然后将通过 Smart Player AP
javascript - 自动播放 Brightcove 视频
我正在使用 Lity.js 在模态窗口中弹出一个 brightcove 视频链接。我的问题是视频没有自动播放，是否有一个工作参数可以用来表示添加到此链接 https://players.brightc
javascript - 三星智能电视应用程序和 Brightcove 示例应用程序远程控制问题
我遇到了 Bightcove (https://github.com/BrightcoveOS/Samsung-Smart-TV-Sample-App) 为三星智能电视提供的示例应用程序的问题。 Re
java - Android Brightcove 视频播放器
我为 Android 应用程序的 Bright Cove 视频播放器编写了示例代码。我是用静态 URL 做的。我很困惑如何使用视频 ID 播放视频。我在下面发布了完整的代码。 //URL of the
JavaScript Brightcove API 暂停和播放
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
javascript - Brightcove 两个播放器 API
我正在按照指南(如下)使用 brightcove api，但我的问题是我无法通过这种方式管理两个玩家，而我需要它:
android - 在安卓原生应用中实现 Brightcove 播放器
我只想在 android.i 中实现 Brightcove 播放器 http://support.brightcove.com/en/docs/accessing-video-content-medi
javascript - 如何连接到由 Brightcove 托管视频结束触发的事件？
当用户点击带有播放按钮的图像时，我有以下代码显示 Brightcove 播放器: $(document).ready(function() { $('#performanceVideo').h
iframe - 替换 Brightcove 智能播放器在移动设备上的默认播放按钮
很可能我只需要正确的术语来找到答案；但是，我想其他人已经遇到过这个问题并且马上知道如何解决它。我正在使用 Brightcove 的服务和他们的 Smart Player。我已经配置了一个 Chrom
javascript - 如何在页面加载后立即使用自动启动参数暂停 Brightcove 视频？
我们正在尝试显示一个视频，在模板加载后，观看者可以通过单击不同的缩略图来启动视频中的不同提示点。问题是，除非视频已经在播放，否则这不起作用，并且我们不希望它在页面加载时自动播放。有没有办法让视频在模板
javascript - Brightcove Attachevent 失败
我正在尝试将事件附加到 Brightcove 视频，但无法触发它。已遵循 Brightcove 文档中的所有步骤。这是我的代码:
javascript - 使用 Brightcove 播放器和外部 JS
我很难让 Brightcove Smart Player API 处理任何外部 JS 文件。我在 index.html 中调用标准 API 方法(例如 onTemplateLoad 和 onTempl
javascript - 单击图像时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏
我正在尝试在点击图片时播放视频并在视频播放完毕后将其隐藏，到目前为止我的结构如下: Bones Season 8, Episode 19

首页

博学

6Ren·AI

商城

javascript - 单击图像时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏