Angular：如何将 youtube 视频动态嵌入到我的模态中？

Question

我正在制作一个电影网站，现在正在制作一个带有预告片的部分。我从 youtube api 抓取了 3 个视频文档，并且已经显示了它们的缩略图并将它们的 id 属性设置为 youtube.com 上视频的 id。

现在，当我单击缩略图标题时，我想打开一个模式窗口，其中显示我选择的电影的 youtube 预告片。我通过抓取视频 ID 并将其动态放置在下面的 iframe 元素中来做到这一点（嵌入 youtube 视频需要此元素）。不幸的是，这似乎不起作用。

<iframe width="560" height="315" src="{{link of youtube video gets inserted here after I click on one of the trailer buttons}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

它向我显示的是一个空模式和以下错误。有谁知道如何解决这个问题？

错误：资源 URL 上下文中使用的不安全值

这就是模态框的样子：它显示的是一个空的模态框，而不是我点击的链接的 youtube 视频。

HTML 文件：这里我将组件中的 embedLink (url) 变量插入我需要嵌入 Youtube 视频的 iframe 元素中

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>
        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div id="{{trailer.body.items[0].id.videoId}}" #trailerTitle (click)="openModal(modal, trailerTitle.id)" class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>
</div>


<!-- The Modal -->
<div #modal id="myModal" class="modal">

    <!-- Modal content -->
    <div #modalContent class="modal-content">
        <span (click)="closeModal(modal)" class="close">&times;</span>
        <iframe width="560" height="315" src="{{embedLink}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

</div>

组件：在 openModal() 方法中，我创建了动态 youtube URL，然后将其分配给 embedlink 变量

export class HomeComponent implements OnInit {

    trailers;
    embedLink = null;

    constructor(private modalService:NgbModal, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){

        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
            })
    }


    openModal(modal, id){
        this.embedLink = 'https://www.youtube.com/embed/' + id;
        modal.style.display = "block";
    }

    closeModal(modal){
        modal.style.display = "none";
    }
}

Answer 1

在这里你必须做更多的工作。您必须在 bypassSecurityTrustResourceUrl 中传递您的 URL，然后您才能添加和播放视频。

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  
  constructor (public sanitizer:DomSanitizer) {

   this.url = this.sanitizer.bypassSecurityTrustResourceUrl(yourfinalURL);

在您的情况下，将最终 URL 的方法中的 this.embedLink 传递给 bind-

   this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.embedLink);