2017-02-06 7 views
1

В Wordpress я пытаюсь встроить видео YouTube, а затем включить ссылки, которые переходят на определенное время в этом видео. Поэтому, если я хочу перейти к 2:00, я могу создать ссылку, которая переходит к этой точке встроенного видео.С встроенным видео на YouTube, создайте ссылку, которая перейдет на конкретное время

Я нашел аналогичный вопрос несколько лет назад, но считаю, что API YouTube изменился. Я не могу найти никаких плагинов, которые могут это сделать, поэтому захотите сделать это самостоятельно, если это возможно.

Предложения?

Редактировать: Вот код, который я придумал до сих пор. Однако единственная проблема заключается в том, что если видео еще не было воспроизведено, то 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>'; 
} 
+0

доля фрагмент кода –

+0

я добавил пример кода, что я пробовал. – devbanana

ответ

0

Хорошо, я это понял, наконец. Я отправлю свое решение здесь, если у кого-то еще будет тот же вопрос. Я не знаю, может ли быть лучший способ сделать это, но это лучшее, что я нашел.

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> 
0

Есть хорошие образцы.

https://12starsmedia.com/blog/embed-youtube-video-specific-start-time http://www.youtubestartend.com/

Вы можете использовать? Начать = определить начальные точки

+0

То же, что и выше. Я хочу начать с самого начала. Но я хочу привязать к конкретным темам на протяжении всего видео, как оглавление почти. Вы увидите, что в некоторых описаниях видео, где они ссылаются на начало каждой темы, а затем она переходит к тому времени. – devbanana

0

Вы можете использовать код, как это. Используйте? Запуска = 100 & конец = 250

<iframe width="560" height="315" src="https://www.youtube.com/embed/N8VCzpXJZvM?start=100&end=250&autoplay=1" frameborder="0" allowfullscreen></iframe> 
+0

Спасибо. Но это не совсем то, что я ищу. Я хочу начать с начала видео. Но я хочу привязать к конкретным темам на протяжении всего видео, и когда клика будет нажата, видео перейдет к этой точке. – devbanana