Как обновить идентификатор видео YouTube при нажатии различных кнопок воспроизведения

У меня есть фид, полный видео. Когда пользователь нажимает кнопку воспроизведения, я хочу, чтобы определенный идентификатор видео был загружен в переменную videoID, найденную в API YouTube. Прямо сейчас мне удалось запрограммировать сайт, чтобы начать воспроизведение видео для каждого нажатия кнопки воспроизведения, однако идентификатор (который указан как настраиваемое поле с использованием ACF $video_id при редактировании сообщения) не обновляется. Вот что мое питание выглядит следующим образом:Как обновить идентификатор видео YouTube при нажатии различных кнопок воспроизведения

Я попытался добавить глядя на player.loadVideoById, но не везло.

Вот мой код YouTube API:

function onYouTubeIframeAPIReady() { 
    player = new YT.Player("player", { 
     videoId: "HoVWmW0Zdmo", 
     playerVars: { 
      controls: '0', 
      html5: '1', 
      cc_load_policy: '0', 
      disablekb: '1', 
      iv_load_policy: '3', 
      modestbranding: '1', 
      showinfo: '0', 
      rel: '0', 
      autoplay: '0', 
     }, 
     events: { 
      "onReady": onPlayerReady, 
      "onStateChange": onPlayerStateChange 
     } 

    }); 
} 

//the id placed below is just a sample id to see if I could even get the ID to change...which I couldnt 
jQuery(".media-circle").on("click", function() { 
     player.loadVideoById("Vw4KVoEVcr0"); 
    });

Вот HTML фрагмент кнопку воспроизведения. класс .media-circle - это круглая форма, содержащая кнопку playpause, которая накладывает обложку альбома.

<div class="album-dark-overlay play"> 
    <div class="media-circle"> 
     <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i> 
    </div> 
</div>

Должен ли я потянуть идентификатор сообщения, чтобы javascript знал, какой идентификатор видеоID искать?

источник

2016-12-28 Jordan Lewallen

вот что я сейчас в замешательстве. Я использую настраиваемое поле, в котором пользователь добавляет видеоид при редактировании сообщения. И затем я делаю это в php $ video_id = get_field ('video_id'). 'media-circle' - это круг, который окружает кнопку воспроизведения. Поэтому, когда пользователь щелкает в любом месте области круга, кнопка воспроизведения (внутри круга) затем переключается на кнопку паузы (я успешно выполнил эту часть). Мне также удалось запустить видео, чтобы начать играть, когда кнопка воспроизведения переключается, а не видео, которое связано с конкретной записью, на которую было нажато @NewToJS. –

. Как вы передаете новое видео «ID»? Как это связано с щелчком элемента media-circle? Вам нужно передать новое видео 'ID', чтобы игрок знал, что играть. На данный момент вы говорите ему, чтобы он воспроизводил одно и то же видео каждый раз, когда нажимается «media-circle». Почему бы вам не дать 'media-circle'' ID ', вы можете установить его идентификатор ID видео, таким образом, когда вы нажимаете «media-circle», вы можете настроить идентификатор этого элемента, и игрок узнает, какое видео для воспроизведения ... Пример 'player.loadVideoById (this.id);' – NewToJS

@NewToJS Мое понимание 'loadVideoByID' состояло в том, что аргументом, который он принял, был идентификатор видео (строка случайных символов), а не идентификатор элемент html? Как бы этот элемент html был связан с видео, которое находится внутри сообщения? –

Если вы используете player.loadVideoById("Vw4KVoEVcr0");, он будет воспроизводить видео Vw4KVoEVcr0.

Поскольку у вас есть слушатель onclick событий для всех элементов группы media-circle каждый раз, когда вы нажимаете этот элемент будет продолжать загружать то же самое видео ID, если не сказать ему, чтобы играть различные ID.

Когда вы создаете видеорезультаты/список, вам нужно сообщить ему, какое видео должно играть ID, когда эта функция запущена. Если вы дадите каждому media-circleID в соответствии с видео, которое оно должно воспроизвести, вы можете настроить таргетинг на ID элемента, который запускает функцию для изменения/загрузки нового видео.

Вот пример. Я установил ID изображений на видео ID он должен играть при нажатии. Вы можете видеть, что все они имеют один и тот же класс media-circle. JsFiddle Demo

Demo Исходный код

HTML

<div id="player"></div><hr/> 
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br> 
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br> 
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

Javascript/JQuery

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', { 
     height: '200', 
     width: '350', 
     videoId: 'HoVWmW0Zdmo', 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
} 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 
$(function() { 
    jQuery(".media-circle").on("click", function() { 
     player.loadVideoById(this.id); 
    }); 
});

CSS

img{max-height:100p;max-width:150px;}

Если у вас есть какие-либо вопросы относительно исходного кода выше, пожалуйста, оставьте комментарий ниже, и я вернусь к вам как можно скорее.

Надеюсь, это поможет. Счастливое кодирование!

источник

2016-12-28 04:33:20 NewToJS

Как обновить идентификатор видео YouTube при нажатии различных кнопок воспроизведения

ответ

Смежные вопросы