Попытка использовать VideoJS, VideoJS-YouTube, VideoJS-Playlist и VideoJS-Playlist-UI

Question

Я работаю над сайтом, на котором я пытаюсь создать собственный тематический плейлист для воспроизведения видео, размещенных на YouTube.Я успешно использовал VideoJS и VideoJS-YouTube вместе в другой части сайта, но после введения VideoJS-Playlist и VideoJS-Playlist-UI я столкнулся с некоторыми проблемами.После нескольких попыток загрузить видео с YouTube, похоже, ни один источник не появился.Однако у меня есть воспроизводимый список воспроизведения, из-за чего я думаю, что либо неправильно использую VideoJS-YouTube.

Вот мой рабочий пример без VideoJS-Playlist & VideoJS-Playlist-UI :

Пример работы CodePen

ИЛИ

<video class="videos-video video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=voFRslp8d60"}], "youtube": { "ytControls": 1 } }'></video>

Вот мой неработающий пример, с использованием VideoJS-Playlist & VideoJS-Playlist-UI:

Пример сломанного CodePen

HTML:

<div>
  <video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
<div>
  <div class="vjs-playlist vjs-playlist-vertical vjs-csspointerevents vjs-mouse"></div>
</div>

AND JS:

var options = {
    techOrder: ["youtube"],
    youtube: {
        ytControls: 1
    }
};
var player = videojs('current-video', options);

player.playlist([{
    sources: [{
        src: 'https://www.youtube.com/watch?v=voFRslp8d60',
        type: 'video/youtube'
    }]
}]);

player.playlistUi();

Если естьспособ получить видео на YouTube с помощью этих двух дополнительных плагинов, я приму любой совет, как это сделать.Спасибо!

Answer 1

Я узнал ответ!Как ни странно, следование документации со страницы VideoJS-YouTube на GitHub привело меня в заблуждение.Вместо того, чтобы устанавливать специальные атрибуты для плагина, если вы устанавливаете плагин, а затем рассматриваете ресурс как обычный источник, видео загружается отлично.Подробный пример того, как его правильно загрузить, доступен здесь или через фрагменты ниже:

HTML:

<div>
  <video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered" controls></video>
</div>

JS:

var player = videojs('current-video');

player.playlist([{
    sources: [{
        src: 'https://www.youtube.com/watch?v=voFRslp8d60&t=17s',
        type: 'video/youtube'
    }]
}]);