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

I am using Ngx-Videogular in my angular app (version 12). I am selecting video/path from local.

In .html file: -

<input type='file' (change)="onSelectFile($event)" />
<video [vgMedia]="$any(media)" #media id="singleVideo" preload="auto" crossorigin>
      <source [src]="url" *ngIf="format==='video' && url" type="video/mp4">
      <source [src]="url" *ngIf="format==='video' && url" type="video/ogg">
      <source [src]="url" *ngIf="format==='video' && url" type="video/webm">
</video>

In .ts file:-

  url: any;
  format: any;

  onSelectFile(event:any) {
    const file = event.target.files && event.target.files[0];
    if (file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      if(file.type.indexOf('image')> -1){
        this.format = 'image';
      } else if(file.type.indexOf('video')> -1){
        this.format = 'video';
      }
      reader.onload = (event) => {
        this.url = (<FileReader>event.target).result;
      }
      console.log(this.url);
    }
  }

And in module.ts file import:-

import {VgCoreModule} from '@videogular/ngx-videogular/core';
import {VgControlsModule} from '@videogular/ngx-videogular/controls';
import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play';
import {VgBufferingModule} from '@videogular/ngx-videogular/buffering';

I have tried in .mp4 format ,it's working.

Answer 2

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 3

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>

Answer 4

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    import {VgCoreModule} from '@videogular/ngx-videogular/core';
    import {VgControlsModule} from '@videogular/ngx-videogular/controls';
    import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play';
    import {VgBufferingModule} from '@videogular/ngx-videogular/buffering';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule,
        BrowserAnimationsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    
    export class AppModule { }

the package.json

{
  "name": "videos",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@videogular/ngx-videogular": "^3.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "videogular2": "^7.0.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "~12.0.0",
    "@angular/compiler-cli": "~12.0.0",
    "@types/core-js": "^2.5.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

Answer 5

It looks like you are using videogular2 library but didn't import the required modules to the AppModule. The following 4 modules should be imported into AppModule.

...
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';

@NgModule({
  ...,
  imports: [
    ...
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  ...
})
export class AppModule {
}