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

【问题标题】：Video player plugin in Angular 2 to support Youtube and Vimeo videosAngular 2 中的视频播放器插件，支持 Youtube 和 Vimeo 视频
【发布时间】：2018-12-20 05:36:33
【问题描述】：

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

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

【问题讨论】：

也许您可以在 HTML 5 中使用视频标签而不是使用插件？
我添加了答案，让我们试试这个，然后告诉我。
你试过这个答案吗？发生了什么？
我试过了，但我不希望视频播放器推荐其他视频.. 我只想观看 url 中的视频
如果您使用 youtube 视频，则预定义建议是默认值。

标签： angular html video-streaming html5-video

【解决方案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 传递。我希望它可以解决您的另一个问题。

【讨论】：