角度视频：不允许加载本地资源：file：/// E：/Videoes/pakistan.mp4

Question

本地路径中的视频或图像未显示， 如何从本地src路径以角度播放视频。

代码：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-carousel>
          <template v-for="item in items" :key="item.id">
            <v-carousel-item v-if="item.src" :src="item.src"></v-carousel-item>
            <v-carousel-item v-else v-html="item.content"></v-carousel-item>
          </template>
        </v-carousel>
      </v-container>
    </v-content>
  </v-app>
</div>

错误图像如下所示：

] 1

Answer 1

您可以使用以下代码段以角度方式播放视频

我将在模板中定义视频标签，您需要将源更改为源文件

<video #videoPlayer controls (click)="toggleVideo()" preload="metadata">
  <source src="blobUrl" type='video/webm' />
</video>

然后，您必须在组件中填充src，例如

@ViewChild('videoPlayer') videoplayer: any;

getBlobUrl(isInit: boolean) {
    this.store.select(fromCourseDetail.selectCourseMediaByCourseDetailId).subscribe(res => {
      if (res !== null) {
        this.blobUrl = res.blobUrl;
      }
      if (!isInit && this.videoplayer.nativeElement) {
        this.videoplayer.nativeElement.load();
      }
    });
  }

//this will allow you play and pause video too
toggleVideo(event: any) {
    this.videoplayer.nativeElement.paused ? this.videoplayer.nativeElement.play() : this.videoplayer.nativeElement.pause();
  }

希望有帮助