如何将视频Youtube放入我的角度应用程序中

时间:2019-03-01 17:03:24

标签: api youtube embed angular7

我有一个问题,我正在尝试将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);
        }
      );
  }
}
 

如果有人可以帮助我,也许很简单,我不知道...

恭喜, 安东尼。

0 个答案:

没有答案