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:

 

  
    
    

    
      
      
    

    
      
      

      

      

      
      

      
    
    
    
  

  
    
      {{ vdo.name }}

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

}

user_1283715 · Answer

Using $any() template casting operator:

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

user_10125418 · Answer

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

user_15760477 · Answer

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

user_15760477 · Answer

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.

A very simple version works fine:

user_16601175 · Answer

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

In .html file: -

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 = (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.

Video with angular

5 Answers