iframe [src]="videoUrl | sanitize“-页面重新加载导致我的网站出现404 iframe
iframe [src]="videoUrl | sanitize“-页面重新加载导致我的网站出现404 iframe
提问于 2018-06-29 04:56:41
我正在尝试从数据库加载一个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在下面提到的内容。因此，它不再不断刷新。我不得不做一些调整，而不是这样做，我只是做了一个自定义的‘消毒剂’管道。
但我确实按照他提到的方式重新创建了它，结果与管道相同，管道只是一种我可以不断重用它的方式，而不必担心每次都要重写。
然而，我现在遇到的问题是，如果我刷新页面，有时会显示我网站的一个带框架的版本，指向页面404，而不是youtube视频。
为什么会发生这种情况，或者有人能给我指出一个可以解释它的来源吗？我找不到原因。
谢谢!
回答 1
Stack Overflow用户
发布于 2018-06-29 05:23:39
我怀疑这是因为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);
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51091110
复制相关文章
相似问题
腾讯云开发者
