Search code examples
javascriptvideopopcornjs

Can popcorn.js detect switching videos and continue without restarting?


I'm making interactive video and I've just started using popcorn.js I have a video and on the certain point in video I have 2 buttons that leads to another video. My problem is that all the text I've created to pop up at certain time in first video are popping up at others as well.

Here's the first video:

<video id="main-video" src="DSC_0010_1.mp4" video muted></video>

Here's the popcorn part:

document.addEventListener("DOMContentLoaded", function () {

     var pop = Popcorn("#main-video");

     pop.footnote({
       start: 2,
       end: 15,
       text: "<br>Dobrodošel popotnik, <br> na kratko bi ti rad predstavil mesto Ptuj...",
       target: "video-text"
     });

     pop.play();
  }, false);

Here's the part of switching to the other video:

function vidSwap(vidURL) {
  var myVideo = document.getElementsByTagName('video')[0];
  myVideo.src = vidURL;
  myVideo.load();
  myVideo.play();
}

Here's one of the buttons:

<button class="gumb-podlaga" href="#" onClick="javascript:vidSwap('dominikanski-mesto.mp4'); return false;">Staro mestno jedro</button>

I'm looking for an answer if there's any kind of solution, that popcorn could detect that switching the video source doesn't mean to start all over.


Solution

  • Try recording the time before loading the video and then setting before playing:

    function vidSwap(vidURL) {
      var myVideo = document.getElementsByTagName('video')[0];
      var currentTime = myVideo.currentTime;
      myVideo.src = vidURL;
      myVideo.load();
      myVideo.currentTime = currentTime;
      myVideo.play();
    }