Что вы думаете о видео с канала Youtube в приложении Angular? В этой статье я покажу, как легко интегрироваться в angular проекты (версия 7).
В конце публикации ссылка на проект, а не на GiHub;)
API данных YouTube v3
Первый шаг - получить ключ api. Посетив https://developers.google.com/youtube/v3/getting-started, вы найдете процедуры, необходимые для получения учетных данных для авторизации.
Вкратце, вам необходимо:
1) Перейдите в Google Developers Console.
2) Выберите проект.
3) На левой боковой панели выберите API и авторизацию. В списке API убедитесь, что для API данных YouTube v3 установлен статус ВКЛ.
Следующим шагом после создания проекта является регистрация модуля HttpClientModule в основном модуле (app.module.ts).
import { HttpClientModule } from '@angular/common/http';
И декларируем в импорте:
imports: [ BrowserModule, AppRoutingModule, HttpClientModule, NgxSpinnerModule
Я буду использовать библиотеку NGX-Spinner для отображения счетчика при загрузке видео.
Установите библиотеку с помощью:
$ npm install ngx-spinner --save
И объявите модуль в импорте в соответствии с приведенным выше кодом.
Теперь мы можем создать службу для вызовов API Youtube.
В терминале напишите:
$ ng g service youtube
Мы создаем переменную apiKey, в которой хранится значение API, полученное на первом шаге.
Затем мы вставляем в конструктор класс HttpClient. Он предоставляет методы для выполнения HTTP-запросов.
Давайте реализуем метод, который возвращает список видео. Мы называем его getVideosForChanel (). Мы передаем два аргумента, первый - это идентификатор канала. Второй ограничивает количество видеороликов.
Мы объединяем эту информацию в URL-адрес API, передавая другие параметры в виде порядка ('& order = date), part = snippet, который содержит другие свойства, идентифицирующие заголовок, описание, среди прочего, и тип ресурса (type = video).
let url = ‘https://www.googleapis.com/youtube/v3/search?key=' + this.apiKey + ‘&channelId=’ + channel + ‘&order=date&part=snippet &type=video,id&maxResults=’ + maxResults
В классе компонента (app.component.ts) мы объявляем массив результатов видео:
export class AppComponent {
videos: any[];
В методе конструктора мы внедряем службу, созданную для запроса видео (YoutubeService), и класс для отображения счетчика (NgxSpinnerService).
constructor(private spinner: NgxSpinnerService, private youTubeService: YoutubeService) { }
Затем в методе ngOnInit () мы вызываем метод, передавая идентификатор канала, в этом примере канал принадлежит моему ребенку :), и максимальное количество. getVideosForChanel результаты ('UC_LtA_EtCr7Jp5ofOsYt18g', 15).
ngOnInit() {
this.spinner.show()
setTimeout(()=>
{
this.spinner.hide()
},3000)
this.videos = [];
this.youTubeService
.getVideosForChanel('UC_LtA_EtCr7Jp5ofOsYt18g', 15)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(lista => {
for (let element of lista["items"]) {
this.videos.push(element)
}
});
}
В результате .subscribe (list = ›{, получаем свойство items и добавляем каждый объект в созданный массив.
В начале функции мы включили таймаут в 3 секунды, чтобы закрыть счетчик.
setTimeout(()=>
{
this.spinner.hide()
},3000)
Давайте завершим кодирование шаблона компонента (app.component.html:
<div *ngFor="let video of videos" class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow vh-50">
<a href="https://www.youtube.com/watch?v={{video.id.videoId}}" target="_blank">
<img [src]="video.snippet.thumbnails.medium.url" class="card-img-top" alt="..."></a>
<div class="card-body text-center">
<h5 class="card-title mb-0">
<a href="https://www.youtube.com/watch?v={{video.id.videoId}}">{{video.snippet.title}}
</a></h5>
<div class="card-text text-black-50">{{video.snippet.description.slice(0, 100)}}</div>
<p class="card-text">{{video.snippet.description}}</p>
</div>
</div>
</div>
Мы зацикливаем массив с помощью директивы * ngFor. Мы определили ссылку для просмотра видео через videoID по адресу href = https://www.youtube.com/watch?v={{video.id.videoId}} '.
Вы можете просмотреть другую информацию о видео, обратившись к свойству сниппета.
Конечный результат:
Очень просто !!!
Если вы дочитали до этого места, большое вам спасибо. Все вопросы оставляйте в комментариях.
Проект на Github.
