Question

我正在尝试从数据库加载videoUrl并将其分配给iframe [attr.src]以显示youtube视频。数据必须来自数据库，对我来说，除了上传和显示视频外，别无选择。

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

总有办法避免这种情况吗？

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

<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在下面提到的内容。因此，它不再不断刷新。我必须进行一些调整，而不是那样做，我只是制作了一个自定义的“消毒剂”管道。

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

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

发生这种情况的任何原因，还是有人可以指出我的原因？我找不到原因。

谢谢！

Answer 1

我怀疑这是由于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);
        }
    }
}

iframe [src] =“ videoUrl |清理”-页面重新加载导致我的网站的404 iframe

1 个答案: