Angular 2 中支持 Youtube 和 Vimeo 视频的视频播放器插件

Question

到目前为止，我一直在使用https://videogular.github.io/videogular2/docs/在我的应用程序中播放我的自定义视频，但最近当我尝试播放源为 youtube 和 vimeo 的视频时，此插件不支持它。

是否有更好的开源替代方案可用于播放来自 Angular 2+ 中各种插件的视频。

Answer 1

这是播放所有类型的视频完美测试的解决方案。我为您制作了stackblitz。

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

安装：-

npm install ngx-embed-video --save

参考链接：-

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

打字稿文件，

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

我希望它可以解决您的问题。

让我们尝试一次，如果有任何错误，请告诉我。

编辑：- 问题 我试过了，但我不希望视频播放器推荐其他视频。我只希望查看 url 中存在的视频

我更新了您的另一个问题答案，请访问此链接。

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

您必须?rel=0在视频网址链接中像这样传递。我希望它解决了你的另一个问题。

有关更多视频相关信息，请访问此链接。

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