如何在 Angular 中嵌入 YouTube 视频？答案

【问题标题】：How to Embed a YouTube video in Angular?如何在 Angular 中嵌入 YouTube 视频？
【发布时间】：2017-02-24 12:47:25
【问题描述】：

我在 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 视频？

【问题讨论】：

标签： angular

【解决方案1】：

现在有一个Angular YouTube Player component

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

example.component.html

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

example.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();  
    }
  }
}

example-module.ts

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

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

【讨论】：

【解决方案2】：

YouTube 视频作为 iframe 嵌入。一个嵌入代码如下所示，

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

要使 YouTube 视频与 Angular 2+ 一起使用，您必须先清理 URL。

导入 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>

【讨论】：

干杯老兄，现在整理好了！ :)

【解决方案3】：

经过多次更改后我遇到了同样的问题，但什么也没发生。幸运的是，在我的页面上成功播放了嵌入视频后，我意识到禁用广告拦截器。确保您的广告拦截器已禁用。

videoUrl = 'https://www.youtube.com/embed/your-videoId'
constructor(private authService: AuthService, private _sanitizer: DomSanitizer) {
    this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(this.videoUrl);
}

<iframe [src]='safeURL' width="560" height="315" frameborder="0" allowfullscreen></iframe>

【讨论】：

【解决方案4】：

我不知道您究竟想在哪里嵌入视频，但您可以在 HTML 中的某个位置：

<iframe width="420" height="315" [src]="'https://www.youtube.com/embed/' + v.videoCode"></iframe>

【讨论】：

谢谢，我会试一试（如果它很简单，我很抱歉，我还是新手）
顺便说一句，您正在使用一些 angular 2 beta 版本 - *ngFor="#v of videos" 是旧语法。新的是 *ngFor="let v of videos"
谢谢，我只是想先掌握基础知识，我现在有一个 Pluralsight 帐户，并且会做最新的教程，但我开始了这个并想看透 :)
我尝试将代码实现到我的 HTML 中，但会在控制台中出现错误。做一个 player-component.ts , html 然后做一个点击事件来生成嵌入式播放器会更好吗？
我把代码放在了错误的 html 文件中，这就是为什么，不用担心，播放器正在嵌入，我只需要设置 onclick 事件就可以在那里播放视频 :)

【解决方案5】：

试试这个：

component.ts
------------
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
::
::
::
export class MyComponent implements OnInit {
public safeURL: SafeResourceUrl;
constructor(private _sanitizer: DomSanitizer) { 
this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/WovwuOFBUuY');
}
}

HTML:
----    
<tr>
<td>AliceMovie</td><td><iframe width="560" height="315" [src]='safeURL' frameborder="0" allowfullscreen></iframe><td>
<td>

【讨论】：