Проверьте, воспроизводится ли видео на YouTube, и запустите скрипт - PullRequest
Новая
       12

Проверьте, воспроизводится ли видео на YouTube, и запустите скрипт

6 голосов
/ 21 января 2012

В WordPress вставлено следующее видео 

<iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/xxxxxx?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

И это внутри слайдера SlideDeck, который я хочу остановить, когда кто-то нажимает на видео. Я не могу понять, как получить эту строку кода 

self.pauseAutoPlay = true;

для запуска во время воспроизведения видео.

Мне очень нужна помощь, пожалуйста.

Редактировать: Поскольку я не конечный пользователь. Мне нужно что-то, что будет работать с встроенным кодом YouTube по умолчанию.

Ответы [ 2 ]

20 голосов
/ 21 января 2012

Вам необходимо использовать API YouTube iFrame.Имейте в виду, я знаю только основы Javascript и т. Д., Так что это потенциально может быть намного более эффективным.

Вы встраиваете свой iframe, как обычно 

<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowfullscreen></iframe>

Нос парой изменений.У него должен быть идентификатор 'player', и вам нужно добавить ?enablejsapi в конец исходного URI.

Затем вам нужно будет запустить следующий скрипт для загрузки API JS.Как создатель, игрок 

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

Обратите внимание, что new YT.Player('player' должен соответствовать вашему идентификатору iframe, а videoId: 'u1zgFlCw8Aw' должен соответствовать URI src.

После этого вы сможете запускать скриптыкак 

var myPlayerState;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          // DO THIS
        }
        myPlayerState = event.data;
      }

if (myPlayerState == 1){
  // PAUSE SLIDER
}
8 голосов
/ 21 января 2012

Вам нужно встроить YouTube напрямую со вспышкой:

http://code.google.com/apis/youtube/js_api_reference.html#Embedding

после этого вы можете использовать API JavaScript для YouTube.

Ваш код может быть примерно таким: 

<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
                   "ytapiplayer", "425", "356", "8", null, null, params, atts);


var player;

function onytplayerStateChange(newState) {
    if (newState == 1)
        callPlay();
    else if (newState == 2)
        callPause();
}

function callPlay() {
    //video is play
}

function callPause() {
    //video is paused
}

</script>

P.S. swfobject.js soure вы можете найти здесь

...