如何在Angular2中嵌入YouTube视频？

Question

我在YouTube上关注这个教程,它基本上是一个包含你喜欢的音乐的表格,但教程结束了.

它正在使用Angular2,并且一切正常,但是绅士离开它时,它只是在控制台中使用以下代码显示视频的构造函数:

*Playlist.Component.Ts:

export class PlaylistComponent{ 
onSelect(vid:Video) { 
console.log(JSON.stringify(vid)); } }

*Playlist.Component.html:

<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr *ngFor="#v of videos" (click)="onSelect(v)">
<td>{{ v.id }}</td>
<td>{{ v.title }}</td>
<td>{{ v.desc }}</td>
</tr>
</tbody>
</table>

*App.Component.Ts:

import {Component} from 'angular2/core';
import {Config} from './config.service';
import {Video} from './video';
import {PlaylistComponent} from './playlist.component';

@Component({
    selector: 'my-app',
    templateUrl: 'app/ts/app.component.html',
    directives: [PlaylistComponent]
})

export class AppComponent {
    mainHeading = Config.MAIN_HEADING;
    videos:Array<Video>;

    constructor() {

        this.videos = [
            new Video(1, "The 1975 - Somebody Else", "Bimd2nZirT4", "Calm."),
            new Video(2, "Killswitch Engage - Holy Diver", "NR7dG_m3MsI", "Hell Yeah!")
        ]


    }
}

*最后是Video.ts:

export class Video {
    id: number;
    title: string;
    videoCode: string;
    desc: string;

    constructor(id: number, title: string, videoCode: string, desc: string){
          this.id = id;
          this.title = title;
          this.videoCode = videoCode;
          this.desc = desc;
    }
}

一旦您点击桌面,我如何才能将YouTube视频实际嵌入浏览器？

Answer 1

YouTube视频嵌入为iframe.一个嵌入代码看起来像这样,

<iframe width="560" height="315" src="https://www.youtube.com/embed/1ozGKlOzEVc" frameborder="0" allowfullscreen></iframe>

要使YouTube视频与Angular 2一起使用,您必须首先清理网址.

导入DomSanitizer使用它.所以将videoURL传递给 https://www.youtube.com/watch?v=1ozGKlOzEVc.

import { DomSanitizer } from '@angular/platform-browser';

然后将其添加到构造函数中

constructor(videoURL: string, private _sanitizer: DomSanitizer){
   this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(videoURL);
}

然后将值绑定safeUrl到iframe.

<iframe [src]='safeURL' frameborder="0" allowfullscreen></iframe>

Answer 2

现在有一个Angular YouTube Player 组件

要了解 API，您需要阅读源代码。它具有各种输入、输出和功能。例如：

示例.component.html

<youtube-player
  #player
  [videoId]="videoId"
  (ready)="onReady($event)"
  (stateChange)="onStateChange($event)"
></youtube-player>

示例.component.ts

import { Component, Input, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'example'
  templateUrl: './example.component.html'
})
class YoutubePlayerExample implements OnInit {
  @ViewChild('player') player: any;
  videoId: string;

  @Input()
  set id(id: string) {
    this.videoId = id;
  }

  ngOnInit() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(tag);
  }

  // Autoplay
  onReady() {
    this.player.mute();         
    this.player.playVideo();    
  }

  // Loop
  onStateChange(event) {
    if (event.data === 0) {
      this.player.playVideo();  
    }
  }
}

示例模块.ts

import { NgModule } from '@angular/core';
import { YouTubePlayerModule } from '@angular/youtube-player';

@NgModule({
  imports: [YouTubePlayerModule],
  declarations: [YoutubePlayerExample]
})
export class YoutubePlayerExampleModule {}