angular - 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 安装 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 {}

typescript 文件，

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

希望它能解决您的问题。

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

编辑:-问题我尝试过，但我不希望视频播放器推荐其他视频。我只想查看网址中存在的视频

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

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

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

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

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