我有一个问题,我正在尝试将YouTube视频直接放在我的角度应用程序中,但我不知道该怎么做。
我没有ID,因为它是一个搜索列表,由于我的研究,所有视频都会更改。
(对不起,我的英语:/)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { detail_video } from '../youtube/video-detail.model';
const YT_clé = 'La clé';
const YT_url = 'https://www.googleapis.com/youtube/v3/search';
@Injectable({
providedIn: 'root'
})
export class RechercheServYT {
constructor(private http: HttpClient) { }
search(query: string): Observable<detail_video[]> {
const params: string = [
`q=${query}`,
`key=${YT_clé}`,
`part=snippet`,
`type=video`,
`maxResults=25`
].join('&');
const url_query = `${YT_url}?${params}`;
return this.http.get(url_query).pipe(map(response => {
return response['items'].map(item => {
return new detail_video({
id: item.id.videoId,
title: item.snippet.title,
description: item.snippet.description,
thumbnailUrl: item.snippet.thumbnails.high.url
});
});
}));
}
}
import { Component, OnInit, Output, EventEmitter, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, filter, debounceTime, tap, switchAll } from 'rxjs/operators';
import { detail_video } from '../video-detail.model';
import { RechercheServYT } from 'src/app/services/youtube-recherche.service';
@Component({
selector: 'app-affichage',
templateUrl: './affichage.component.html',
styleUrls: ['./affichage.component.css']
})
export class recherchevideo implements OnInit {
@Output() loading = new EventEmitter<boolean>();
@Output() results = new EventEmitter<detail_video[]>();
constructor(private youtube: RechercheServYT, private el: ElementRef) { }
ngOnInit() {
// conversion du keyup en un flux observable
fromEvent(this.el.nativeElement, 'keyup').pipe(
map((e: any) => e.target.value), // extraction de la valeur de l'input
map((query: string) => this.youtube.search(query + " backtrack")), // la recherche
switchAll())
.subscribe( // le resultat de la requete
_results => {
this.loading.emit(false);
this.results.emit(_results);
},
err => {
console.log(err);
this.loading.emit(false);
},
() => {
this.loading.emit(false);
}
);
}
}
如果有人可以帮助我,也许很简单,我不知道...
恭喜, 安东尼。