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-保存

参考链接：-

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中存在的视频

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

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

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

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

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

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

1 个答案: