Встраивание Javascript YouTube не загружается до обновления страницы

Question

У меня есть видео с YouTube, которое вызывается из фрагмента Javascript. Функциональность позволяет выбирать главу onClick - позволяет пользователю воспроизводить видео в разное время (startSeconds) - видео не загружается, пока o не обновит страницу или наугад. В первый раз я загружаю страницу, без кубиков. В консоли ничего не отображается, и я протестировал его с тем же результатом в Chrome и Safari.

мой код:

<div id="player"></div> 

<script type="text/javascript"> 
var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('player', { 
    width: '800', 
    videoId: 'YQY9BZBrZds', 
    events: { 
    'onStateChange': onPlayerStateChange  
    }, 
    playerVars:{ 
    rel: 0, 
    wmode: "opaque" 
    }   
}); 
} 

function onPlayerStateChange(evt) { 
if (evt.data == 0) { 
     $('#video_popup').removeClass('hide_pop'); 
     $('#video_popup').addClass('display_pop'); 
} 
else if (evt.data == -1) { 
     $('#video_popup').removeClass('display_pop'); 
     $('#video_popup').addClass('hide_pop'); 
} 
else { 
     $('#video_popup').removeClass('display_pop'); 
     $('#video_popup').addClass('hide_pop'); 
} 
} 

function chapter1() { 
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 0}); 
    player.cueVideoById('YQY9BZBrZds', 0); 
    player.playVideo(); 
} 

function chapter2() { 
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 22}); 
player.cueVideoById('YQY9BZBrZds', 22); 
player.playVideo(); 
} 

function chapter3() { 
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 44}); 
player.cueVideoById('YQY9BZBrZds', 44); 
player.playVideo(); 
} 

function chapter4() { 
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 87}); 
player.cueVideoById('YQY9BZBrZds', 87); 
player.playVideo(); 
} 

function chapter5() { 
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 149}); 
player.cueVideoById('YQY9BZBrZds', 149); 
player.playVideo(); 
} 

Мой сайт: Click here http://design.vast42.com/rcity/redux/

Как вы можете видеть, в соответствии с инструкциями 1 2 3 где видео жизнь.

Я получил этот код для ma previous S.O. пост/JSBin: Link to source YouTube API loadVideoById startSeconds not working

Спасибо всем, кто может дать представление о том!

Answer 1

Я думаю, вы не должны использовать cueVideoById. Эта функция добавляет видео в сигнал вашего плеера. Тем не менее это одно и то же видео.

Эта функция загружает миниатюру указанного видео и подготавливает плеер для воспроизведения видео.

Вы должны использовать функцию seekTo.It сделает ваше видео в нужное положение без перезагрузки видео.

Ищет определенное время в видео. Если игрок приостанавливается при вызове функции, он будет оставаться приостановленным. Если функция вызывается из другого состояния (воспроизведение, воспроизведение видео и т. Д.), Проигрыватель воспроизводит видео.

Документация: https://developers.google.com/youtube/js_api_reference?hl=en#seekTo

Ваша функция должна выглядеть следующим образом:

function chapter1() { 
    player.seekTo(0); 
}