javascript - 如何通过Youtube链接设置iframe？

Question

它下载文件而不是播放。我完全不明白为什么，因为我正在做一个教程。

零件:

public infoPage: InfoPage;
public trustUrl: SafeResourceUrl;
constructor(
    public oAuthService: OAuthService,
    private dataService: DataService,
    public router: Router,
    public route: ActivatedRoute,
    private sanitizer: DomSanitizer
) {
    this.route.params.subscribe(params => {
        if (params['id']) {
            this.dataService.get<InfoPage>('api/infopages/' + params['id'])
                .subscribe(infoPage => {
                    this.updateVideoUrl(infoPage);
                    this.infoPage = infoPage;
                });
        }
    });
}
public ngOnInit() {
    this.infoPage = {};
}

public updateVideoUrl(infoPage: InfoPage) {
    if (infoPage == null || infoPage.youtubeVideoUrl == null)
        return "";
    this.trustUrl =
        this.sanitizer.bypassSecurityTrustResourceUrl(infoPage.youtubeVideoUrl.replace("watch?v=", "v/"));
}

并查看

 <iframe width="560" height="315" class="e2e-iframe-trusted-src" [src]="trustUrl" allowfullscreen></iframe>

Answer 1

您可以使用这个简单的组件为您构建iframe HTML

https://github.com/SamirHodzic/ngx-embed-video

一个小提示是，生成的字符串必须在具有div属性bind的innerHTML中使用。像这样:

<div [innerHTML]="youtubeEmbedPlayer"></div>

在您的.ts文件中:

import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';

@Component({
  selector: 'app-component',
  template: '<div [innerHtml]="iframe_html"></div>',
})
export class AppComponent {
  youtubeEmbedPlayer: any;
  youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";

  constructor(
    private embedService: EmbedVideoService
  ) {
    this.youtubeEmbedPlayer = this.embedService.embed(youtubeUrl);
  )
}

该组件-ngx-embed-video-将操纵youtube / vimeo / dailymotion中的网址，以生成正确的iframe设置。像魔术