How to start play and seek to a timestamp wth API?

Resolved

(@alanp57)

I’m trying to add links that when clicked will start playing the video and jump to a timestamp in the video. I’ve tried this code but it does not seem to be working,

if( typeof(flowplayer) != "undefined" ) { 
        
        jQuery(document).on("click", "#ts1", function (e) {
          flowplayer(function (api, root) {
              api.bind("ready", function (e, api) {
                  api.play();
                  api.seek(200);
              });
          });                    
        });      
      }

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

AlanP57

(@alanp57)

2 years, 3 months ago

I’ve updated my code:

jQuery(document).ready(function(){

  if( typeof(flowplayer) != "undefined" ) { 
    flowplayer(function (api, root) {
      jQuery("#ts1").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        console.log("playing");
        api.play();
        api.seek(200);      
      });  
    });
  }
  
});

Now the seek function is working but the play function is not. There is only one video on the page, Do I need to pass the play function a parameter?

Thread Starter

AlanP57

(@alanp57)

2 years, 3 months ago

This may be the answer to my question:

jQuery(document).ready(function(){

  if( typeof(flowplayer) != "undefined" ) { 
    flowplayer(function (api, root) {
      
      jQuery(".link_1").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        seek_and_play(api, link_1_track)
      });  
                  
      jQuery(".link_2").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        seek_and_play(api, link_2_track)
      });
    });
  }
  
});

function seek_and_play(api, track) {
  if(!api.playing) {
    api.load();
    setTimeout(function () {
      api.seek(track);
    }, 1000);
  } else {
    api.seek(track);          
  }  
}