vue 播放海康威视rtsp格式的 监控

要在 Vue 中播放海康威视的 RTSP 格式监控视频，你可以使用 `vue-video-player` 插件来实现。该插件支持多种视频格式，并且可以在 Vue 中轻松使用。

以下是基本的使用步骤：

1. 安装 `vue-video-player` 插件

npm install vue-video-player --save

2. 在组件中引入插件

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import VideoPlayer from 'vue-video-player'

Vue.use(VideoPlayer)

3. 在模板中使用组件并设置视频源

<video-player ref="player" :options="options"></video-player>

...

data() {
  return {
    options: {
      autoplay: true,
      sources: [{
        type: 'video/mp4',
        src: 'your rtsp url'
      }]
    }
  }
}

其中，`options` 对象中的 `autoplay` 属性设置为 `true` 可以在加载页面后自动播放视频。`sources` 数组中的 `type` 属性需要设置为 `video/mp4`，并且 `src` 属性需要设置为你的海康威视 RTSP 格式的视频地址。

4. 样式调整

你可能需要在 CSS 文件中添加一些样式来调整视频播放器的大小、布局等。

以上就是在 Vue 中播放海康威视 RTSP 格式监控视频的基本步骤，你可以根据实际需求进行相应的调整和优化。