Brightcove Studio API - 视频结束后重新启动视频答案

【问题标题】：Brightcove Studio API- restart video after video endsBrightcove Studio API - 视频结束后重新启动视频
【发布时间】：2016-10-01 16:51:25
【问题描述】：

弄清楚如何在 Brightcove 中做事非常困难。有大量关于旧版本 api 的信息，但最新/最强大的信息非常困难。

我正在尝试为视频设置重置。当视频结束时，我想基本上将播放器重置为初始状态。

我能想到的最好方法是检测“结束”事件并告诉它播放，然后暂停一段时间。

这似乎很贫民窟，我不得不认为有更好的方法。我想重新展示一下海报，例如，以及 BigPlayButton 等。

我看到了一个重置方法，但我没有看到它在做任何事情。

这是我当前的实现：

var heroVideo;

videojs("heroPlayerID").ready(function () {

    heroVideo = this;

}).on('ended', function(){

    heroVideo.play();

    setTimeout(function(){

        log('paused');
        heroVideo.pause();

    }, 1500);

});

更新

在阅读 this 关于使用 CSS 显示/隐藏元素后，我将以下 css 添加到我的样式表中：

.vjs-has-started.vjs-ended .vjs-poster,
.vjs-has-started.vjs-ended .vjs-big-play-button{
     display: inline-block !important;
}

我还将它添加到我的 javascript 事件处理程序中：

.on('ended', function(){
    heroVideo.controls(true); // the controls never appear again if you don't do this
});

现在，一切都如我所愿。

【问题讨论】：

标签： video html5-video brightcove

【解决方案1】：

在视频结束后添加到结束事件的实现中，只需要设置视频的视频源，可以在第一次加载视频时保存。

创建了一个演示供参考。它正在更新海报并重置带有大播放图标的视频。也不需要任何 css 更改。

希望对您有所帮助。干杯。

var heroVideo;
var src;
videojs('heroPlayerID').ready(function() {
  heroVideo = this;
  src=heroVideo.currentSrc();
  
  /* I have provided a custom poster image here, 
  if your video already has poster then skip this */
  heroVideo.poster('http://animal-dream.com/data_images/tiger/tiger8.jpg');
  
  heroVideo.on('ended', resetOnEnded);
});

function resetOnEnded() {
  //heroVideo.reset();
  //videojs.removeClass(heroVideo.contentEl(), "vjs-has-started");
  // heroVideo.poster('http://animal-dream.com/data_images/tiger/tiger8.jpg');
  heroVideo.src(src);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Brightcove restart on end</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <video id="heroPlayerID" data-account="1752604059001" data-player="52d490a5-eef6-4e2e-a39f-d9c4b212d45f" data-embed="default" controls class="video-js">
  </video>

  <script src="//players.brightcove.net/1752604059001/52d490a5-eef6-4e2e-a39f-d9c4b212d45f_default/index.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

【讨论】：