CODEWITHSUNDEEP
videohtml5-videobrightcove
Scott
Scott

Reputation: 1872

Brightcove Studio API- restart video after video ends

Figuring out how to do things in Brightcove is crazy hard. There is a ton of information on the old version of the api, but the latest/greatest is strangely hard.

I'm trying to set up a reset for the video. When the video ends, I want to basically reset the player to it's initial state.

The best I've been able to come up with is to detect "ended" event and tell it to play, and then to pause it some time afterward.

This seems very ghetto and I have to think there's a better way. I'd like to re-show the Poster, for example, and the BigPlayButton, etc.

I see a reset method but I don't see that it's doing anything.

This is my current implementation:

var heroVideo;

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

    heroVideo = this;

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

    heroVideo.play();

    setTimeout(function(){

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

    }, 1500);

});

Update

After reading this about using CSS to show/hide elements, I added the following css to my stylesheet:

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

I also added this to my javascript event handler:

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

Now, everything works just like I want to.

Upvotes: 1

Views: 1323

Answers (3)

Abhishek Kumar
Abhishek Kumar

Reputation: 1040

var myPlayer,
  videoLoopNum = 0;

  videojs.getPlayer('myPlayerID').ready(function() {
    // Get a reference to the player when it is ready
    myPlayer = this;
    // Listen for the "ended" event and play the video
    // You can also do this by adding the loop attribute to the player code
    myPlayer.on("ended", function () {
      playVideo();
    });

    // Play the video first time
    playVideo();
  });

  // +++ Loop video 3 times +++
  function playVideo () {
    // Check the number of times the video has played
    if (videoLoopNum < 3) {
      // Start video playback
      myPlayer.play();
      // Increment number of times video played
      videoLoopNum++;
    }
  }

refer doc

Upvotes: 0

rth
rth

Reputation: 36

Try this, it's not required to change or replace the src of the video

Instead use heroVideo.currentTime(0);

hope it's helpful

Upvotes: 1

Rishabh
Rishabh

Reputation: 36

Adding to your implementation of ended event once the video ends, just need to set the video source for the video, which can be saved while loading the video for first time.

Created a demo for reference. It is updating Poster and resets the video with big play icon. Doesn't need any css changes as well.

Hope it helps. Cheers.

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>

Upvotes: 0

Related Questions