时间戳

首页 > 解决方案 > iframe [src]="videoUrl | sanitize" - 当页面重新加载导致我的网站出现 404 iframe

javascript - iframe [src]="videoUrl | sanitize" - 当页面重新加载导致我的网站出现 404 iframe

问题描述

我正在尝试从数据库加载 videoUrl 并将其分配给 iframe [attr.src] 以显示 youtube 视频。数据必须来自数据库，除了上传视频并显示之外，我没有其他方法可以解决这个问题，我们目前无法做到这一点。

问题是它每隔几秒钟就会不断刷新，使视频短暂闪烁。

有没有办法避免这种情况？

这是我引用的 iframe 和返回 url 的方法的代码。

<iframe
  class="courseVideo row col-md-12 col-sm-12 col-xs-12 text-center"
  height="300"
  id="introVideoUrl"
  [src]="getIntroVideoUrl(section.introVideoUrl)"
  frameborder="0" allow="autoplay; encrypted-media"
  allowfullscreen
  style="margin-top: 15px;">
</iframe>

getIntroVideoUrl(url) {
  return this.sanitizer.bypassSecurityTrustResourceUrl(
    "https://www.youtube.com/embed/" + url
  );
}

-- 在@JeremyW 的建议之后编辑 -- 好的，所以我设法得到了@JeremyW 在下面提到的内容。因此，它不再不断刷新。我不得不做一些调整，而不是那样做，我只是做了一个定制的“消毒剂”管道。

但是我确实按照他提到的方式重新创建了它，结果与管道相同，管道只是我可以不断重复使用它的一种方式，而不必担心每次都重写它。

但是，我现在遇到问题，如果我刷新页面，有时会显示我的网站的 Iframed 版本，指向第 404 页，而不是 youtube 视频。

为什么会发生这种情况，或者有人可以指出我解释它的来源吗？我找不到原因。

谢谢！

标签： javascriptangulariframeyoutube-iframe-apiangular-dom-sanitizer

解决方案

我怀疑这是由于 Angular 的属性绑定的工作方式。我无法轻松找到来源来验证我的怀疑，但我认为每次 Angular 检查src属性的值，看看它是否已更改，它会重新调用该函数......导致它刷新属性的值 - 导致您看到的重新启动。

我过去做过类似的事情，这里有一些我的代码片段可以帮助你。长话短说，与其从 HTML 调用函数，不如将[src]属性指向一个变量，然后使用 TS 文件中的函数来设置该变量的正确值：

HTML：

<iframe 
  *ngIf="homeVideo"
  [src]="homeVideo"
  frameborder="0"
  gesture="media"
  allow="encrypted-media"
  allowfullscreen>
</iframe>

TS：

export class HomeComponent implements OnInit {
    // Video Url
    homeVideo;

    ngOnInit() {
        // Pull updated content from Firebase
        this.getContent();
    }

    getContent() {
        this.contentService.getPageContent('homePage').then( pageContent => {
            this.homeVideo = this.sanitizer.bypassSecurityTrustResourceUrl(pageContent.homeVideo);
        }
    }
}

推荐阅读