如何在Angular中嵌入YouTube视频? [英] How to Embed a YouTube video in Angular?

问题描述

我在YouTube上关注本教程，基本上它是一张包含您喜欢的音乐的表格，但是该教程结束了.

I was following this tutorial on YouTube, and it's basically a table with the music you like, but the tutorial ends.

它正在使用Angular2，并且一切正常，但是这位先生将其放在哪里，它只是使用以下代码在控制台中显示了视频的构造函数:

It's using Angular2, and everything is working correctly however where the gentleman left it, it's just showing the constructor of the video in the console with this code:

* 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视频实际嵌入浏览器中?

How would I get it to actually embed the YouTube video in the browser once you click on the table?

推荐答案

YouTube视频被嵌入为iframe.一个嵌入代码如下:

YouTube videos are embedded as iframe. One embed code look like this,

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

要使YouTube视频与Angular 2+兼容，您必须先清理URL.

To make the YouTube Video work with Angular 2+, you have to sanitize the URL first.

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

import DomSanitizer to use it. So pass the videoURL as https://www.youtube.com/watch?v=1ozGKlOzEVc.

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

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

Then add it to your constructor

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

然后将值 safeUrl 绑定到iframe.

Then bind the value safeUrl to iframe.

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

这篇关于如何在Angular中嵌入YouTube视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！