Question

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

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

我能想出的最好的方法就是检测＆＃34;结束＆＃34;事件并告诉它播放，然后暂停一段时间。

这看起来非常贫穷，我不得不认为这是更好的方式。我想重新展示海报，例如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
});

现在，一切都像我想要的那样。

Answer 1

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

创建一个演示以供参考。它正在更新Poster并使用大播放图标重置视频。也不需要任何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>

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

更新

1 个答案: