Как передать определенный идентификатор на встроенный проигрыватель YouTube?

0

EDIT: Я придумал лучшее решение. Во время цикла while я передаю id как аргумент функции onclick. НО, теперь, когда я нажимаю любую из DIV ничего не происходит. Можете ли вы сказать, где проблема? Спасибо за помощь.

Я столкнулся с проблемой. Я пытаюсь реализовать трейлеры. То, как пользователь может их просматривать, - это щелкнуть div, который должен вести себя как кнопка с помощью javascript/jQuery. Проблема в том, что я хочу иметь только встроенную игру, поэтому мне не нужно многократно перерабатывать код. Но я не могу понять, как заставить игрока играть в трейлер для фильмов, нажатие которых нажало кнопку. Ниже приведен код и под ним сводка моего запроса. Спасибо за прочтение.

//Trailer links that got generated with a loop..
//EDIT: DIVs now contain the id as an attribute to a onClick function
<div class="trailer" onclick="playTrailer(M7lc1UVf-VE)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(ksfj34ln-Xe)">
    <p>WATCH TRAILER</p>
</div>

<div class="trailer" onclick="playTrailer(rasdasdl-Xe)">
    <p>WATCH TRAILER</p>
</div>

//EDIT: added hidden DIV that should be displayed when the DIVs are clicked
<div id="trailer-box" style="display: none;">

    //EDIT: the play is now within the hidden DIV
    <div id="ytplayer"></div>

</div>

<script>
  function showMovie(id){
      $('.trailer-box').toggle(); //EDIT: newly added

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

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          videoId: id
        });
      }
  }
</script>

Я хотел бы знать, есть ли способ получить значение DIV после его щелчка и передать его в поле videoId скрипта. Если кто-то из вас знает, как это можно сделать, даже если это означает, что больше настроек, пожалуйста, скажите мне. Большое вам спасибо за чтение и за ваши ответы.

  • 1
    Ваше рабочее решение здесь jsfiddle.net/j9M7E/12 ...
  • 0
    Я только что попробовал, и это работает! Но сейчас я так устал, чтобы попытаться реализовать это на самом деле. Огромное спасибо! Я опубликую обновление завтра первым делом. Извините за неудобства, но я уже очень давно. Я надеюсь, что вы все еще будете завтра, чтобы ответить на возможные вопросы :). Спасибо чувак.
Показать ещё 2 комментария
Теги:
youtube

2 ответа

0

Должно быть что-то вроде

$('.watch').click (function (){
    player.loadVideoById($(this).attr ('id'));
});

пример

больше информации

Поделиться
  • 0
    Большое спасибо, я предложил другое решение, но оно все еще не работает. Можете ли вы посмотреть на редактирование в моем посте?
0

Похоже, вы не используете jQuery, поэтому:

Вместо этого вы должны использовать атрибуты данных:

<div data-id="M7lc1UVf-VE" class="watch">
    <p>WATCH TRAILER for movie A</p>
</div>

Затем:

var nodeList = document.querySelectorAll('.watch');

for (var i = 0; i < nodeList.length; i++) {
    nodeList[i].addEventListener('click', 
                    function(e){
                      showMovie(e.target.parentElement.getAttribute("data-id"));
                    }, 
                    false);
}

function showMovie(id){
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: id
    });
  }
}
Поделиться
  • 0
    Большое спасибо, я придумала другое решение и несколько объединила его с тем, что вы предложили, но оно все еще не работает. Можете ли вы посмотреть на редактирование в моем посте?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню