如何使用 Flowplayer javascript API 为嵌入的视频创建点击事件？

Question

我的目标是在我的播放器下方添加跳转到视频中特定时刻的按钮。

有一个演示示例基本上可以满足我的要求： https://flowplayer.com/demos/using-the-api — 然而它基于 Flowplayer 的云播放器实现，我使用的是 Javascript API 嵌入我的播放器。基本的相关脚本是这样的：

flowplayer.cloud.then(function () {
    var api = flowplayer("#player")

    seek3.onclick = function() {
      api.fas.seek_to('00:01:01:11');
    }
});

我找到的使用 Javascript API 创建按钮的示例如下：

flowplayer(function(opts, root, api) {

    // small jQuery-compatible utility built inside the player
    var $ = flowplayer.mq;

    // render a custom button when the player is mounted
    api.on('mount', function() {
    var btn = $('<button>').txt('Test Button').on('click', function() {
    api.toggleMute();
    });

    $('.fp-controls', root).append(btn);

    });

});

我的播放器很好用。但是，当我尝试合并这两种方法时，我失败了。这是损坏的代码：

flowplayer(function(opts, root, api) {

   var api = flowplayer("#flowplayer");

    seek3.onclick = function() {
      api.fas.seek_to('00:01:01:11');
    }

 });

我也试过作为替代品

document.getElementById('seek3').onclick = function()

和

$('#seek1').onclick = function() {

（前面是从工作示例中借用的附加代码行）：

var $ = flowplayer.mq;

但是对于每一种变化，我都会不断收到以下错误："Uncaught TypeError: Cannot set property 'onclick' of null"。

如有任何帮助，我们将不胜感激。我发现 Flowplayer 文档真的很难用，因为在搜索结果中通常很难判断引用的是哪个版本的播放器。除了解决这个特定问题之外，我真的很想找到一些关于与 API 交互的基本信息。

Answer 1

对于可能在与 API 交互时遇到困难的任何其他人，Flowplayer 贴心地发布了一个新的演示示例——其功能与 cloudplayer 演示中的类似，但这个示例是针对 javascript玩家：https://codepen.io/team/flowplayer/pen/KOzWOK

var api = flowplayer("#player", 
  { src      : "//edge.flowplayer.org/drive.m3u8"
  , autoplay : false
  , token    : "eyJraWQiOiJqOEF6djg5NlJMMWIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJqOEF6djg5NlJMMWJcIixcImRvbWFpblwiOltcIm5ncm9rLmlvXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.UtJliSh4IcIKs71PVzXWdIrJJ8-1_KRK0hKd7OKp5EJhAdpZStuYbbU4bgDs--C6Gak6OBrb-xQBh6sd4dyrlA"
  , muted    : true
  })

/**
 * helper function to seek if possible or 
 * tell the player to seek when possible
 * 
 * btn     {HTMLElement}
 * seconds {Number}
 */
function chapter (btn, seconds) {
  btn.onclick = function () {
    // player is preload=none so we must tell 
    // the player to seek when it is possible
    if (api.readyState == 0) api.setOpts({start_time: seconds})
    // player has already started loading content
    if (api.readyState > 0) api.currentTime = seconds
    // attempt to play content
    api.togglePlay(true)
  }
}
// bind the buttons to times
chapter(seek1, 20)
chapter(seek2, 45)
chapter(seek3, 60)

我的工作版本包含以下 JS 代码变体：

/**
 * helper function to seek if possible or 
 * tell the player to seek when possible
 * 
 * seconds {Number}
 */
function seek_to_cue (seconds) {
  //alert('bingo?'); //tft
  // player is preload=none so we must tell the player to seek when it is possible
  if (api.readyState == 0) {
      api.setOpts({start_time: seconds});
  }
  // player has already started loading content
  if (api.readyState > 0) {
      api.currentTime = seconds;
  }
  // attempt to play content
  api.togglePlay(true);
}

在我的 PHP 代码中包含 JS 播放器调用：

$button_actions .= 'document.getElementById("'.$button_id.'").addEventListener("click", function(){ seek_to_cue('.$start_time_seconds.'); });';

如何使用 Flowplayer javascript API 为嵌入的视频创建点击事件？

How to create onclick events for video embedded using the Flowplayer javascript API?

html

javascript

flowplayer