angular5 rtsp视频播放

可以使用ngx-videogular插件来实现在Angular5中播放RTSP视频。以下是实现步骤：

1. 安装ngx-videogular插件

npm install ngx-videogular

2. 导入VgCoreModule和VgControlsModule

在app.module.ts文件中导入VgCoreModule和VgControlsModule：

import { VgCoreModule } from 'ngx-videogular/core';
import { VgControlsModule } from 'ngx-videogular/controls';

@NgModule({
  imports: [
    BrowserModule,
    VgCoreModule,
    VgControlsModule
  ],
  ...
})
export class AppModule { }

3. 创建HTML页面

在HTML页面中添加video标签，并使用ngx-videogular指令来绑定视频播放器：

<vg-player>
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>
  <video #media
         [vgMedia]="media"
         id="video"
         preload="auto"
         controls>
  </video>
</vg-player>

4. 在组件中处理视频链接

在组件中定义视频链接，例如：

videoUrl: string = 'rtsp://example.com/video.mp4';

然后在ngOnInit钩子函数中获取video标签，并为其设置视频链接：

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit {
  @ViewChild('media') media: any;

  videoUrl: string = 'rtsp://example.com/video.mp4';

  ngOnInit() {
    this.media.nativeElement.src = this.videoUrl;
  }
}

这样就可以在Angular5中播放RTSP视频了。需要注意的是，RTSP视频的播放需要浏览器和设备支持。