vue + typescript + video.js实现 流媒体播放 视频监控功能

视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件。当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据。

1. yarn add video.js videojs-flash

2. 创建videp.js声明文件

3. 创建video_player.vue组件,供外部调用。源码如下

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';

import 'video.js/dist/video-js.css';

import _videojs from 'video.js';
const videojs = (window as any).videojs || _videojs;
import 'videojs-flash';

@Component({
 name: 'video-player',
})
export default class VideoPlayer extends Vue {
 /* ------------------------ INPUT & OUTPUT ------------------------ */
 @Prop({ type: Object, default: () => {}}) private options!: object;

 /* ------------------------ VUEX (vuex getter & vuex action) ------------------------ */

 /* ------------------------ LIFECYCLE HOOKS (created & mounted & ...) ------------------------ */
 private mounted() {
  this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
   // console.log('onPlayerReady');
  });
 }

 private beforeDestroy() {
  if (this.player) {
   this.player.dispose();
  }
 }
 /* ------------------------ COMPONENT STATE (data & computed & model) ------------------------ */
 private player: any;

 /* ------------------------ WATCH ------------------------ */

 /* ------------------------ METHODS ------------------------ */
}

</script>

<template>
<div class="module_video_player">
 <video ref="videoPlayer" class="video-js" autoplay></video>
</div>
</template>

<style lang="stylus" scoped>
@import '~@/assets/styles/var.styl';

.module_video_player
 position relative
 width 780px

</style>

4. 在需要使用的模块(如show_monitor.vue)调用。组件创建后,向后台发送轻轻获取rtmp视频播放地址,并更新videoOptions中的src。触发video_player的创建、挂载等。

import VideoPlayer from '@/components/video_player.vue';

components: {
 VideoPlayer,
}

 private videoOptions = {
  techOrder: ['flash', 'html5'],
  sourceOrder: true,
  flash: {
   hls: { withCredentials: false },
  },
  html5: { hls: { withCredentials: false } },
  sources: [{
   type: 'rtmp/flv',
   src: '', // 'rtmp://live.hkstv.hk.lxdns.com/live/hks2', // 香港卫视,可使用此地址测试
  }],
  autoplay: true,
  controls: true,
  width: '778',
  height: '638',
 };
<video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>

5. 心跳检测

在show_monitor.vue创建时,新建定时器,每隔3秒向后台发送一个包含当前监控设备id的请求,告知后台此设备监控被调用播放。show_monitor.vue销毁时,清空定时器,后台将停止传输视频数据。

private intervalFunc: any;

private created() {
 // ****
 this.intervalFunc = setInterval(() => {
  EquipmentService.monitor_continue_test(this.eqmtid);
 }, 3000);
}

private destroyed() {
 clearInterval(this.intervalFunc);
}

注: 可以再电脑安装VLC media player下载 , 播放获取到的rtmp路径,已检测数据获取是否成功

总结

以上所述是小编给大家介绍的vue + typescript + video.js实现 流媒体播放 视频监控功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • vue与TypeScript集成配置最简教程(推荐)

    前言 Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手. 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置. 初始化项目 首先用vue-cli建立webpack项目.这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开. # vue init webpack vue-typescript ? Project name vue-typescript ? Pro

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • 在 Typescript 中使用可被复用的 Vue Mixin功能

    转到用 Typescript 写 Vue 应用以后,经过一轮工具链和依赖的洗礼,总算蹒跚地能走起来了,不过有一个很常用的功能 mixin,似乎还没有官方的解决方案. 既想享受 mixin 的灵活和方便,又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验. vuejs 官方组织里有一个 'vue-class-component' 以及连带推荐的 'vue-property-decorator',都没有相应实现.翻了下前者的 issue,有一条挂了好些时间的待

  • vue + typescript + video.js实现 流媒体播放 视频监控功能

    视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件.当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据. 1. yarn add video.js videojs-flash 2. 创建videp.js声明文件 3. 创建video_player.vue组件,供外部调用.源码如下 <script lang="ts"> import { Component, Emit, Prop, Vue }

  • vue使用video.js进行视频播放功能

    关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide

  • Vue使用video.js的代码详解

    一.下载video.js npm install --save-dev video.js 二.在vue脚手架中引入video.js(main.js引入) import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video //引入Video播放器 三.实例化了视频.js播放器,并在 上销毁了它 <template> <div> <video ref=&quo

  • vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • vue+element-ui+sortable.js实现表格拖拽功能

    本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本 2.下载element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代码 // 导入element-ui,和全局使用element-ui样式 import ElementUI from "element-ui"; import

  • 如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • vue+video.js实现视频播放列表

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 1.引入Video.js npm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$videos = Video 引用完成后我们就可以做视频列表了 2.在页面中 使用 method中定义初始方法 init

  • vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

    目录 需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so

  • vue video和vue-video-player实现视频铺满教程

    网页放置视频播放器,我一般都是用video.js和它的插件vue-video-player 一:Video.js 需求:对于简单的视频播放需求来说,video.js足以胜任了. 它可是支持HTML5和Flash的视频播放器呦. 1:安装video.js npm install -s video.js 2:在main.js文件中引入相关文件 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.

随机推荐