使用 html 5 视频标签以角度播放本地视频时清理不安全的 URL答案

【问题标题】：sanitizing unsafe URL when local video played in angular with html 5 video tag使用 html 5 视频标签以角度播放本地视频时清理不安全的 URL
【发布时间】：2018-04-25 07:11:19
【问题描述】：

本地视频在html5视频标签中播放时，会抛出不安全URL和视频内容未播放的警告。

用domSanitizer.bypassSecurityTrustResourceUrl(url)in angular 清理 URL 仍然有同样的问题

添加了 stackblitz https://stackblitz.com/edit/angular-uodypm?file=app%2Fapp.component.ts

请帮帮我..

【问题讨论】：

标签： javascript angular

【解决方案1】：

在视频源元素中使用绑定

<video *ngIf="playerSrc" width="100%" autoplay="autoplay" controls style="margin-top: 50px; margin-bottom: 20px;">
  <source [src]="playerSrc" type="video/mp4">
    </video>

stackblitz https://stackblitz.com/edit/angular-h5zawg?file=app/app.component.html

【讨论】：

【解决方案2】：

我也遇到过类似的视频问题，这是我解决它的一种方法。您可以像下面提到的那样在 HTML 中设置 SRC，以解决图像/视频的不安全数据问题。

<video *ngIf="playerSrc" width="100%" autoplay="autoplay" controls 
   style="margin-top: 50px; margin-bottom: 20px;">
   <source [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" type="video/mp4">
</video>

像这样绑定 src：[src]="sanitizer.bypassSecurityTrustResourceUrl(src)"

【讨论】：