javascript - 使用嵌入式 YouTube 视频，创建跳转到特定时间的链接

Question

在 Wordpress 上，我试图嵌入一个 YouTube 视频，然后包含跳转到该视频中特定时间的链接。因此，如果我想跳转到 2:00，我可以在嵌入视频中创建一个跳转到该点的链接。

几年前我发现了一个类似的问题，但我相信 YouTube API 已经改变了。我找不到任何插件可以做到这一点，所以如果可能的话我想自己做。

建议？

编辑:这是我到目前为止编写的代码。然而，唯一的问题是，如果视频还没有播放，那么 seekTo 似乎需要很长时间。我不确定是否应该响应 onReady 事件或其他事件。

add_action( 'wp_enqueue_scripts', 'register_yt_frameapi' );

function register_yt_frameapi() {
    wp_register_script( 'frameapi', 'https://www.youtube.com/iframe_api', array(), '1.0.0', true );
}

add_shortcode('ytlink', 'ytlink');
function ytlink($atts, $content = null)
{
    wp_enqueue_script('frameapi');

    $id = $atts['id'];
    $time = $atts['time'];
    $timeParts = explode(':', $time);
    $seconds = 0;
    for ($i = 0; count($timeParts); $i++)
    {
        $seconds += array_pop($timeParts) * 60 * $i;
    }

    return '<a href="javascript:void(0);" ' .
    'onclick="var player = new YT.Player(\''.$id.'\', {events: {onReady: function () {player.seekTo('.$seconds.', true);}}});">'.
    ($content ?? $time) . '</a>';
}

Answer 1

好吧，我终于明白了。我会在这里发布我的解决方案，以防其他人有同样的问题。我不知道是否有更好的方法来执行此操作，但这是我找到的最好方法。

Javascript:

var player;
var ytSeconds = 0;

jQuery(document).ready(function ()
    {
    player = new YT.Player('yt-embed', {events: {
      'onStateChange': onPlayerStateChange
      }
      });
    });

function onPlayerStateChange(e)
{
  if (e.data == 1 && ytSeconds > 0) {
    e.target.seekTo(ytSeconds);
    ytSeconds = 0;
  }
}

function seekTo(seconds)
{
  if (player.getPlayerState() == 1) {
    player.seekTo(seconds);
  }
  else {
    ytSeconds = seconds;
    player.playVideo();
  }
}

然后链接看起来像:

<a href="#" onclick="seekTo(120);">02:00</a>