在 Angular 中嵌入 HTML5 <video> 元素，将其源放在 [src] 指令下

Question

我正在尝试使用 HTML5 video 元素在我的 Angular 应用中嵌入示例视频.当我使用 [src] 指令将源属性设置为字符串（硬编码）URL 时，视频成功嵌入，但是当我设置相同的 URL 作为，例如，_videoUrl 字段作为 _videoUrl 或 this._videoUrl，视频会崩溃，就像它被禁用一样。最后一件事，当我在浏览器上检查视频元素时，我看到它的 URL 已解析并正确放置在 src 属性中，首先是 [src]="this._videoUrl"，无论如何，仍然无法正常工作，所以，有人知道这里发生了什么吗？

备注：

该视频是在 AWS S3
我正在使用 Angular 9
我在这两种情况下都使用 [src]，并且从未按原样使用 src 属性。

代码：

film.compontent.html

<div class="text-center col-2nd">
  <span style="display: block;">
    <video controls width="600px" height="300px">
      <source [src]="_videoUrl" type="video/mp4"/>
    </video>
  </span>
  <span style="display: block; font-size: 26px;">
    Official trailer
  </span>
</div>

film.component.ts

@Component({
  selector: 'app-film',
  templateUrl: './film.component.html',
  styleUrls: ['./film.component.css']
})
export class FilmComponent implements OnInit {
_videoUrl;
_videoStringUrl;

constructor(
    private route: ActivatedRoute,
    private server: ServerService,
    private sanitizer: DomSanitizer,
    private cartService: CartService
) { }

ngOnInit() {
    this._videoStringUrl = 'https://khadjiev-rk.s3.amazonaws.com/file_example_MP4_480_1_5MG.mp4';
    this._videoUrl = 
         this.sanitizer.bypassSecurityTrustUrl(this._videoStringUrl);
}
}

Answer 1

将 DomSanitizer 注入您的组件并使用类似

的东西

get url() {
  return this.sanitizer.bypassSecurityTrustUrl(this._videoUrl);
}

和

[src]="url"

Answer 2

Demo 使用管道作为消毒剂表明绑定是可信的

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

你的绑定

[src]="_videoUrl | safe : 'url'"

在 Angular 中嵌入 HTML5 <video> 元素，将其源放在 [src] 指令下

Embedding HTML5 <video> element in Angular, putting its source under [src] directive

javascript

html

angular

html5-video

src