Не могу понять, как приостановить видео YouTube на клике - PullRequest
Новая
       21

Не могу понять, как приостановить видео YouTube на клике

2 голосов
/ 20 октября 2011

Мои пользователи используют старый метод встраивания с использованием тега, который YouTube дает вам вместо iframe. Я пытаюсь выяснить, как определить состояние проигрывателя (когда он приостановлен, воспроизводится и т. Д.), Когда пользователь взаимодействует с ним, чтобы я мог приостановить воспроизведение видео, когда пользователь нажимает на следующий слайд.

В настоящее время, используя Wordpress, у меня есть метабокс, который позволяет им вставлять код встраивания YouTube, а затем выводить этот блок кода на слайдер. Я работаю на своем локальном хосте (пример: http://mysite.dev). Что нужно знать, так это то, что у пользователя может быть несколько видео на слайдере.

Из-за жизни я не могу запустить API YouTube.

1) Это объект для вставки YouTube, который они вставляют в поле 

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2) Это видео в слайдере, который я сделал с div: 

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

Я использую JQuery, и я попытался вызвать API следующим образом: 

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

У меня есть функция с именем stopCycle, содержащаяся в jQuery (документ) .ready (function ($) {}); блок кода и эту функцию мне нужно вызывать, когда пользователь нажимает на следующий слайд.

Итак, вот мои вопросы:

  1. Нужно ли вызывать какой-либо внешний файл JavaScript?
  2. В моем блоке готовности документа JQuery, как я могу вызвать API YouTube, чтобы проверить, воспроизводится ли видео?
  3. Что-то еще отсутствует в моем коде или что-то, что вам нужно увидеть?

Мне интересно, было бы лучше, чтобы они вводили только URL-адрес YouTube, а затем я выведу видео с помощью JQuery SWFObject. Чего я не знаю, так это сделать видео для каждого слайда (всего 5). Так что, если бы у них было видео для каждого слайдера, как бы я это сделал?

Я знаю ... здесь полно вопросов.

Ответы [ 2 ]

0 голосов
/ 20 октября 2011

Если вы используете API YouTube, вы сможете приостановить видео следующим образом: 

var ytplayer = document.getElementById("myytplayer");
pauseVideo = function(){
    if (ytplayer){
        ytplayer.pauseVideo();
    }
}

<a href="javascript:void(0);" onclick="pauseVideo();">Pause</a>

Подробнее см. Здесь:http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

РЕДАКТИРОВАТЬ

Если встроенный проигрыватель не имеет идентификатора, вы можете попробовать что-то вроде этого: 

function onYouTubePlayerReady(playerId) {
    $("#" + playerId)[0].addEventListener('onStateChange', "(function(state) { return playerState(state, '" + playerId + "'); })");
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}
0 голосов
/ 20 октября 2011

Из того, что я вижу, у вас есть ошибка: 

ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

Тогда вы можете использовать любой из API-вызовов здесь , и все должно работать нормально и прекрасно

Причина, по которой вы не можете использовать селектор jQuery для этого, заключается в том, что ожидается элемент <embed>.JQuery возвращает массив всех элементов, соответствующих селектору.

Чтобы ответить на ваши вопросы:

  • 1) Нет, если у вас нет js во внешнем файле
  • 2) Чтобы получить текущее видео ytplayer .getVideoUrl()
  • 3) как было сказано ранее
  • 4/5) Вы можете настроить список воспроизведения, используя это: ytplayer .cuePlaylist
...