Встроенный YouTube Javascript не загружается, пока страница не обновится

У меня есть видео на YouTube, вызываемое из фрагмента Javascript. Функциональность позволяет выбирать главу onClick - позволяет пользователю воспроизводить видео в разное время (startSeconds) - видео не загружается до тех пор, пока не обновится страница, или в случайном порядке. В первый раз загружаю страницу, без кубиков. В консоли ничего не отображается, и я тестировал ее с тем же результатом в 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();
}

My site: Click here http://design.vast42.com/rcity/redux/

Как видите, по инструкциям 1 2 3 находится видео.

Я получил этот код от предыдущего S.O. post / JSBin: Ссылка на источник YouTube API loadVideoById startSeconds не работает

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


javascript jquery embed youtube pageload
person user2284251    schedule 08.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

Ваша функция должна выглядеть так:

function chapter1() {
    player.seekTo(0);
}
person Thomas Betous    schedule 08.07.2015