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

Question

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

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

Answer 1

这是播放所有类型视频的完美解决方案tested.I 为您打造的 stackblitz。

堆栈闪电战：- https://stackblitz.com/edit/angular-ngx-embed-video-muthu-ss5n6d

安装：-

npm 安装 ngx-embed-video --save

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

打字稿文件，

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 中的视频被观看

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

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

你必须在你的视频urllink中这样?rel=0。我希望它能解决您的另一个问题。

有关更多视频，请访问此 link。

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

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

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

html

video-streaming

html5-video

angular