Video with angular

Question

I am trying to run an example of video from the Internet but [vgMedia} is underlinde and the code wont run. I couldn't find a solution but I think I miss something but don't know what. Ther error I got is;

Error: src/app/app.component.html:26:20 - error TS2740: Type 'HTMLVideoElement' is missing the following properties from type 'IMediaElement': audioTracks, msAudioCategory, msAudioDeviceType, msGraphicsTrustStatus, and 13 more.

The code is as follows:

 <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>

the ts file:

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

Using $any() template casting operator:

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

In angular 9+ with IVY and strictTemplates flag to true, angular check template types errors.

Answer 2

no, the same error again with [vgMedia}. even if I use a simple version the error is on the same place. I think I am missing something that should be installed.

<vg-player>
  <video #myMedia
         [vgMedia]="myMedia"         [vgMaster]="true" id="my-video"
         src="http://static.videogular.com/assets/videos/videogular.mp4"
         type="video/mp4">
  </video>
</vg-player>

A very simple version works fine:

<vg-player>
  <video   id="singleVideo" preload="auto" width='150' height='100' controls>
      <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
  </video>
</vg-player>