TCSE

Официальный RSS Youtube - как запускать видео на сайте



Еще один способ для запуска видео с ваших каналов и из плейлистов на своем сайте. На этот раз через официальный RSS самого сервиса Youtube.com

Так как официальный RSS Ютуба не отдает картинку ролика, то мы ее будем получать через JS на основе Youtube-id.


Для начала разберем каким образом формируется RSS лента на стороне Youtube.
Хорошая статья на данную тему тут

На данный момент (2021 год) RSS для Youtube можно получить следующим образом:
https://www.youtube.com/feeds/videos.xml?channel_id=CHANNELID (по ID канала)
https://www.youtube.com/feeds/videos.xml?user=USERNAME (по имени пользователя, например, GoogleRU)
https://www.youtube.com/feeds/videos.xml?playlist_id=YOUR_YOUTUBE_PLAYLIST_NUMBER (по плейлисту)


Например канал нашего сайта https://www.youtube.com/channel/UCybVpDaD1_ZoiuE1DxXuVYQ

Его ID будет UCybVpDaD1_ZoiuE1DxXuVYQ
Следовательно прямая ссылка на RSS https://www.youtube.com/feeds/videos.xml?channel_id=UCybVpDaD1_ZoiuE1DxXuVYQ

Клик по такой ссылке в веб-браузере Vivaldi сразу открывает фид




Пример с плейлистом:
https://www.youtube.com/playlist?list=PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR
Где PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR id плейлиста
Следовательно RSS для плейлиста будет https://www.youtube.com/feeds/videos.xml?playlist_id=PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR



Все тут хорошо, кроме того, что нет обложек у роликов.
И вот именно их мы и будем вытягивать из ссылок на страницу ролика.


Код RSS информера informer.tpl для самых нетерпеливых


<a href="{link}" class="bla-1 mb-3 text-decoration-none" itemprop="url" id="ytID_{date=dmYHi}">
    <div class="p-1">
        <picture itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
          <img itemprop="contentUrl" class="video__media" src="{image-1}" alt="" id="poster_{date=dmYHi}">
        </picture>

        <script>
            function YouTubeGetID(a) {
                a = a.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
                return void 0 !== a[2] ? a[2].split(/[^0-9a-z_\-]/i)[0] : a[0]
            }
            var url = "{link}";
            document.getElementById("poster_{date=dmYHi}") && (document.getElementById("poster_{date=dmYHi}").src = "https://img.youtube.com/vi/" + YouTubeGetID(url) + "/0.jpg", document.getElementById("poster_{date=dmYHi}").id = "poster-replace");
        </script>

        <p class="card-text text-center py-3">
            {title}
        </p>
        <span class="btn btn-outline-warning btn-block mb-3"><i class="fa fa-youtube fa-fw"></i> Смотреть</span>

    </div>
</a>



пояснения:



a href="{link}" - формирует прямую ссылку на страницу с роликом

Например: https://www.youtube.com/watch?v=x55JSziUnYs

src="{image-1}" - готовит место для первой картинки из фида. Хотя у нас этой картинки и нет.

Ну а далее JS на основе регулярного выражения вычленяет из URL нужный нам id и подставляет его в URL с картинкой.