在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>';
}
好的,我终于想通了。我将在此处发布我的解决方案,以防其他人有同样的问题。我不知道是否有更好的方法可以做到这一点,但这是我发现的最好的方法。
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>
您可以像这样使用嵌入代码。使用 ?start=100&end=250
<iframe width="560" height="315" src="https://www.youtube.com/embed/N8VCzpXJZvM?start=100&end=250&autoplay=1" frameborder="0" allowfullscreen></iframe>
有很好的样本。
https://12starsmedia.com/blog/embed-youtube-video-specific-start-timehttp://www.youtubestartend.com/
您可以使用 ?start= 来定义起点