Передавать события API-интерфейса YouTube iframe при изменении состояния при изменении src

Поэтому я решил обновить это с помощью рабочего примера. Я отказался от указания тега iframe и просто использовал API-интерфейс iframe для создания iframe, а затем загрузил проигрыватель по идентификатору с атрибутом данных. Вот рабочий пример ниже. Итак, теперь все изменения состояния последовательно передаются через проигрыватель YouTube. Таким образом, скрипт загрузит iframe в Div #player, и вы можете просто загрузить VideoByID с помощью jquery и javascript.

<div id="player"></div>
<script>
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', {
        playerVars: { 'autoplay': 0,},
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    alert('started');
}
function onPlayerStateChange(event) {        
     if(event.data === 0) {            
         alert('done');
     }
}
$( document ).on( "click", ".video-link", function(e) {
    e.preventDefault();
    var videoID = $(this).attr('data-videoID');
    player.loadVideoById(videoID);
});
</script>

А затем используйте ссылку с таким атрибутом данных.

<a href="#" class="video-link"  data-videoID="youtube id here">Link</a>

javascript youtube youtube-iframe-api
person user3331344    schedule 14.08.2015    source источник
comment
Как вы меняете плеер src? Если вы хотите, чтобы проигрыватель воспроизводил новое видео, я бы рекомендовал использовать player.loadVideoById('NewVideoID') Все события для проигрывателя должны работать нормально. Если вы хотите записать в консоль новый идентификатор видео, чтобы увидеть изменения в консоли отладки/отчетности, попробуйте это console.log(player.getVideoUrl().split('?v=')[1]);   -  person NewToJS    schedule 14.08.2015
comment
Я просто использовал традиционную ссылку, как в скрипке, и ориентировался на ссылку iframe ‹a href=youtubelink target=iframe›‹/a›. Я рассмотрю возможность использования javascript, чтобы изменить ее.   -  person user3331344    schedule 14.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вместо того, чтобы иметь кнопки для воспроизведения, почему бы не включить плейлист, когда проигрыватель будет готов? Вы можете хранить идентификаторы видео в массиве... Если это не то, что вы ищете, просто оставьте комментарий ниже, и я изменю все, что смогу, чтобы оно соответствовало.

//Array of videos
var MyVideos=["E6RGMRamAFk","IHQr0HCIN2w","CogIXrea6A4"];
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', {
    events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
//Player is ready, cue the array of videos into the playlist.
player.cuePlaylist(MyVideos);
}
function onPlayerStateChange(event) {
}

JS Fiddle — рабочая демонстрация

Справочник по API проигрывателя YouTube JavaScript

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

Я надеюсь, что это поможет. Удачного кодирования!

person NewToJS    schedule 14.08.2015
comment
Я бы хотел, но я хочу, чтобы люди добавляли в плейлист, поэтому я хотел, чтобы плейлист можно было щелкнуть на случай, если они захотят посмотреть видео не по порядку, поэтому я прямо сейчас смотрю на player.loadVideoById и просто прикрепляю щелчок. событие для каждой ссылки. Я все еще не совсем уверен, как я хочу это сделать, спасибо - person user3331344; 14.08.2015
comment
@user3331344 user3331344 Вы можете создать функцию для добавления новых видео в массив, проигрыватель имеет боковое меню для выбора видео из списка воспроизведения (вверху слева от проигрывателя). Ваш вопрос заключается в том, как создать список воспроизведения, если вы хотите добавить больше в список воспроизведения, вы можете добавить больше видео в проигрыватель. Я добавлю ссылку в ответ на Справочник по API, там все есть. - person NewToJS; 14.08.2015