Video player plugin in Angular 2 to support Youtube and Vimeo videos

Question

I have been using https://videogular.github.io/videogular2/docs/ until now to play my custom videos in my application, but recently when I tried to play videos with source as youtube and vimeo, this plugin doesn't support it.

Is there any better open source alternative available to play video's from various plugins in Angular 2+.

Answer 1

Here is the solution for playing all type of video working perfect tested.I maded stackblitz for you.

Stackblitz:- https://stackblitz.com/edit/angular-ngx-embed-video-muthu-ss5n6d

Install:-

npm install ngx-embed-video --save

Reference link:-

https://www.npmjs.com/package/ngx-embed-video

app.module.ts

import { HttpModule } from '@angular/http';
import { EmbedVideo } from 'ngx-embed-video';

@NgModule({
  imports: [
    HttpModule,

    EmbedVideo.forRoot()
  ]
})
export class AppModule {}

Typescript File,

import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';

@Component({
  selector: 'app-component',
  template: '
        <div [innerHtml]="iframe_html"></div>
        <iframe src="https://player.vimeo.com/video/197933516" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/iHhcHTlGtRs" frameborder="0" allowfullscreen></iframe>
        <iframe src="https://www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>

        <iframe src="https://player.vimeo.com/video/197933516" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <iframe src="https://www.youtube.com/embed/iHhcHTlGtRs" frameborder="0" allowfullscreen></iframe>
        <iframe src="https://www.dailymotion.com/embed/video/x20qnej" frameborder="0" allowfullscreen></iframe>
   ',
})
export class AppComponent {
  iframe_html: any;
  youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";

  constructor(
    private embedService: EmbedVideoService
  ) {
    this.iframe_html = this.embedService.embed(youtubeUrl);
  )
}

I hope its solve your problem.

Let try this once and let me know if any error.

Edit:- Question I tried it, but I dont want the video player to suggest other videos.. I only want the video present in the url to be viewed

Iam updated your another question answer visit this link.

https://www.youtube.com/watch?v=ZUTzJG212Vo

You have to pass like this ?rel=0 in your video url link. I hope it's solve your another issue.

For more video related visit this link.

https://www.angularjs4u.com/video/10-angular-2-embed-video-demos/