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

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

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

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

OR

<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>

И 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 с помощью этих двух дополнительных плагинов, я приму любой совет, как это сделать. Спасибо!


javascript html youtube video.js playlist
person LinkChef    schedule 07.02.2019    source источник

Ответы (1)


arrow_upward
7
arrow_downward

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

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'
    }]
}]);
person LinkChef    schedule 07.02.2019