Как я могу вставить видео Youtube в мое угловое приложение - PullRequest
0 голосов
/ 01 марта 2019

У меня проблема, я пытаюсь вставить видео YouTube прямо в мое угловое приложение, но я не понимаю, как я могу это сделать.

У меня не может быть идентификатора, потому что этосписок поиска, все видео меняются из-за моих исследований.

(извините за мой английский: /)

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);
        }
      );
  }
}
 

Если кто-то может мне помочь, может быть, это просто, я не знаю ...

С уважением, Энтони.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...