Angular中HTML5 video播放本地视频遇不安全URL问题求助

嘿，我来帮你搞定这个本地视频播放的坑！你遇到的“不安全URL”警告，本质是浏览器的安全策略在兜底——哪怕用了DomSanitizer.bypassSecurityTrustResourceUrl()处理file://开头的本地路径，浏览器还是会阻止网页直接访问本地文件系统，这是为了防止恶意网站窃取你的本地文件。

下面给你两种可行的解决思路，根据你的使用场景选就行：

场景1：视频是项目自带的静态资源 #

如果视频是你项目里的固定资源，最稳妥的方式是把它放到Angular的静态资源目录（比如src/assets/），然后用相对路径引用：

1. 把视频文件放到src/assets/videos/目录下（没有的话自己创建），比如my-video.mp4；
2. 在组件里用相对路径生成安全URL：

   import { Component } from '@angular/core';
   import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
   })
   export class AppComponent {
     videoUrl: SafeResourceUrl;
   
     constructor(private sanitizer: DomSanitizer) {
       // 用项目内的相对路径
       const videoPath = './assets/videos/my-video.mp4';
       this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(videoPath);
     }
   }
   

3. 模板里直接绑定：

   <video [src]="videoUrl" controls width="600"></video>
   

这样Angular的开发服务器会把视频作为静态资源提供，路径是完全安全的，不会触发浏览器的安全警告。

场景2：需要播放用户选择的本地视频 #

如果是让用户自己上传/选择本地视频播放，那得用Blob URL来处理——因为用户主动选择的文件，浏览器会临时赋予访问权限：

1. 模板里加文件选择器和视频标签：

   <input type="file" accept="video/*" (change)="onVideoSelected($event)">
   <video *ngIf="videoUrl" [src]="videoUrl" controls width="600"></video>
   

2. 组件里处理文件并生成安全的Blob URL：

   import { Component, OnDestroy } from '@angular/core';
   import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
   })
   export class AppComponent implements OnDestroy {
     videoUrl: SafeResourceUrl | null = null;
   
     constructor(private sanitizer: DomSanitizer) {}
   
     onVideoSelected(event: Event) {
       const fileInput = event.target as HTMLInputElement;
       if (fileInput.files?.length) {
         const videoFile = fileInput.files[0];
         // 生成临时的Blob URL
         const blobUrl = URL.createObjectURL(videoFile);
         this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl);
       }
     }
   
     // 组件销毁时记得释放Blob URL，避免内存泄漏
     ngOnDestroy() {
       if (this.videoUrl) {
         URL.revokeObjectURL(this.videoUrl as string);
       }
     }
   }
   

这种方式完全符合浏览器的安全规则，不会触发任何警告。

为什么之前的方法没用？ #

你之前直接处理file://路径的方式，本质是想让网页直接访问本地文件系统，但浏览器的同源策略和本地文件安全限制会直接阻止这种操作——哪怕你用了DomSanitizer，它只是帮你绕过Angular的内部安全检查，却绕不开浏览器本身的安全机制哦。

内容的提问来源于stack exchange，提问作者Harish98