视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心跳，表明在线收看状态,需要后台持续发送视频数据。
1. yarn add video.js videojs-flash
2. 创建videp.js声明文件
3. 创建video_player.vue组件，供外部调用。源码如下
[removed]
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
import 'video.js/dist/v
在构建一个基于Vue.js、TypeScript以及video.js的流媒体播放视频监控系统时，我们需要考虑以下几个关键知识点：
1. **视频流媒体技术**：视频监控通常涉及到实时数据传输，流媒体技术如RTMP (Real-Time Messaging Protocol)允许后台服务器持续推送视频数据到前端播放器，确保视频的流畅性。RTMP协议支持Flash播放，但现代浏览器逐渐弃用Flash，因此可能还需要考虑HTML5的HLS (HTTP Live Streaming) 或WebRTC作为替代。
2. **video.js**：video.js是一个强大的JavaScript和CSS库，用于构建跨平台、跨浏览器的视频播放器。它提供了丰富的API和自定义选项，可以方便地集成到Vue.js项目中。
3. **typescript集成**：使用TypeScript可以为Vue组件提供类型安全，增强代码的可维护性和可读性。在Vue中引入TypeScript，需要配置`.d.ts`声明文件来定义video.js的类型信息，确保编译时的类型检查。
4. **安装依赖**：通过`yarn add video.js videojs-flash`安装video.js和videojs-flash插件。videojs-flash使得video.js能够支持Flash播放，这对于需要Flash的流媒体服务是必要的。
5. **组件创建**：创建名为`video_player.vue`的Vue组件，其中包含`<script>`、`<template>`和`<style>`部分。`<script>`部分使用TypeScript语法，定义组件的属性、生命周期钩子和方法。`<template>`定义了视频播放器的HTML结构，而`<style>`用于定制样式。
6. **组件实例化与使用**：在其他组件（如`show_monitor.vue`）中，通过导入`VideoPlayer`组件并将其添加到`components`对象中，可以使用这个视频播放器组件。在实例化组件时，需要向后台请求RTMP视频流地址，并将该地址作为`videoOptions`的一部分传入。
7. **心跳检测**：为了保持与后台的连接并反馈用户在线观看状态，可以在播放器的生命周期钩子中设置定时器，每隔3秒发送一个心跳请求到后台。这可以通过在`mounted`或`beforeDestroy`钩子中实现，确保在播放器挂载时启动心跳，销毁时停止心跳。
8. **源码分析**：
- `@Prop`装饰器用于定义组件接收的属性，`options`属性用来传递视频配置。
- `mounted`钩子中初始化video.js播放器，`beforeDestroy`钩子中清理资源。
- `player`变量保存video.js实例，以便后续操作如播放、暂停等。
- `<video>`元素使用`ref="videoPlayer"`以便在组件中引用。
- `<style>`部分使用Stylus预处理器定义样式。
9. **Vue.js组件通信**：在`show_monitor.vue`中，你可以通过`props`或Vuex来传递视频流地址给`VideoPlayer`组件。如果需要在多个组件之间共享状态，Vuex是一个理想的选择，可以用来管理全局状态。
10. **安全性考虑**：在配置`videoOptions`时，`withCredentials: false`表示跨域请求时不携带cookie，这可能是为了防止敏感信息泄露。但在某些情况下，如果需要保持登录状态，可能需要设置为`true`。
通过以上步骤，你可以构建一个具备流媒体播放和心跳检测功能的视频监控系统，同时利用Vue.js和TypeScript的优势提高代码质量和开发效率。
