angular - 带 Angular 视频

Question

我正在尝试运行来自 Internet 的视频示例，但 [vgMedia} 是下划线，代码无法运行。我找不到解决方案，但我想我错过了一些东西，但不知道是什么。我得到的错误是；

错误:src/app/app.component.html:26:20 - 错误 TS2740:类型“HTMLVideoElement”缺少类型“IMediaElement”中的以下属性:audioTracks、msAudioCategory、msAudioDeviceType、msGraphicsTrustStatus 以及其他 13 个属性。

代码如下:

 <div class="video-player-wrapper">

  <vg-player (onPlayerReady)="videoPlayerInit($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>

      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

      <vg-mute></vg-mute>
      <vg-volume></vg-volume>

      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <!-- vgMedia is underlined in the next line -->
    <video #media [vgMedia]="media" [src]="currentVideo.src" width='150' height='100' 
  id="singleVideo" 
     preload="auto" crossorigin>
    </video>
  </vg-player>

  <ul class="player-list">
    <li *ngFor="let vdo of videoItems; let $index = index"
      (click)="startPlaylistVdo(vdo, $index)" [class.selected]="vdo === currentVideo">
      {{ vdo.name }}
    </li>
  </ul>

</div>

ts 文件:

import { Component, OnInit } from '@angular/core';
// import { AnyARecord } from 'dns';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  
  videoItems = [
    {
      name: 'Video one',
      src: 'http://static.videogular.com/assets/videos/videogular.mp4',
      type: 'video/mp4'
    },
    {
      name: 'Video two',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4'
    },
    {
      name: 'Video three',
      src: 'http://static.videogular.com/assets/videos/elephants-dream.mp4',
      type: 'video/mp4'
    }
  ];

  activeIndex = 0;
  currentVideo = this.videoItems[this.activeIndex];
  data:any;

  constructor() { }

  ngOnInit(): void { }

  videoPlayerInit(data:any) {
    this.data = data;

    this.data.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));
    this.data.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }

  nextVideo() {
    this.activeIndex++;

    if (this.activeIndex === this.videoItems.length) {
      this.activeIndex = 0;
    }

    this.currentVideo = this.videoItems[this.activeIndex];
  }

  initVdo() {
    this.data.play();
  }

  startPlaylistVdo(item:any, index: number) {
    this.activeIndex = index;
    this.currentVideo = item;
  }

}

Answer 1

使用 $any()模板转换运算符:

<video #media [vgMedia]="$any(media)" [src]="currentVideo.src" width='150' height='100' 
  id="singleVideo" 
     preload="auto" crossorigin>
    </video>
</vg-player>

在 IVY 和 strictTemplates 标记为 true 的 Angular 9+ 中， Angular 检查模板类型错误。