Question

我的模板：

<iframe [src]="videourl" width="500" height="100%"></iframe>

我的课程：

import { DomSanitizer } from '@angular/platform-browser';
Video:any;
constructor(private domSanitizer : DomSanitizer) {}
ngOnInit() {
    this.videourl= this.domSanitizer.bypassSecurityTrustResourceUrl(myvideourl)
}

它工作正常，但问题是在我收到此类型错误之前播放视频：（platform-browser.es5.js：2899 GET http://localhost:8100/null 404（Not Found）即表示错误404页面，然后它正在播放视频

Answer 1

我们可以处理它。当网络带宽较低时，会出现此错误。

导入此依赖关系。

          videoUrls:string[]=[
            'https:xxxxxxxxxxxxxx',
            'https:Xxxxxxxxxxxxxxx',
            'https:xxxxxxxxxxxxxx',
            'https:Xxxxxxxxxxxxxxx'
          ];
trustedLoading:Loading;

让您的视频保持全球化。

playListVideos： SafeResourceUr [] = [];

constructor(
    private domSanitizer: DomSanitizer,
    private loadingCtrl: LoadingController) {
  }

写下你的建设

ionViewWillEnter(){
    for(let index = 0; index < this.videoUrls.length; index++){
      this.playListVideos.push(this.domSanitizer.bypassSecurityTrustResourceUrl(this.videoUrls[index]));
    }
    this.trustedLoading = this.loadingCtrl.create({
      content:'Please wait...'
    });
    this.trustedLoading.present();
  }
  handleVideoLoad(){
    if(this.trustedLoading){
      this.trustedLoading.dismiss();
      this.trustedLoading = null;
    }
  }

处理您的视频加载

<iframe width="100%" height="315" *ngFor="let playList of playListVideos"
        [src]="playList ? playList : null" (load)="playList ? handleVideoLoad() : null" frameborder="0" allowfullscreen>
</iframe>

将其添加到您的HTML

中

{{1}}

我希望它会对你有所帮助。

Answer 2

<iframe [attr.src]="videourl" width="500" height="100%"></iframe>

使用domSanitizer.bypassSecurityTrustResourceUrl我们可以提及[attr.src]

在iframe

中的src处添加attr.src

404播放视频之前

2 个答案: