vue怎么实现播放监控视频流（VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频）

EasyPlayer 介绍

简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大；

功能支持:

支持 MP4 播放 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; 支持全屏或比例显示; 自动检测 IE 浏览器兼容播放; 支持重连播放；

官网(可在线调试)

NPM文档

实战中使用

VUE 中怎样集成 EasyPlayer

npm install @easydarwin/easyplayer --save

在VUE中使用EasyPlayer还需要配置一些文件才能使用

按需引入编码格式EasyPlayer.wasm文件(作用自行官网查看)

必须引入 EasyPlayer-element.min.js文件

注意:

这两个文件是在public里面,跟index.html同级 引入层级靠前

组件中引入注册:

import EasyPlayer from @easydarwin/easyplayer components: { EasyPlayer },

使用

<easy-player ref="videoplay" :video-url="url"></easy-player>

关于VUE中使用的配置属性

方法名 说明 initPlayer 初始化播放器 destroyPlayer 销毁播放器 switchVideo 播放开关 switchAudio 静音开关 fullscreen 全屏 exitFullscreen 退出全屏 changeStretch 视频拉伸模式 snapshot 保存快照 switchRecording 录像开关

项目实战中使用flv.js实时播放               、断流重连 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、关闭断流开发心得

使用评价:

EasyPlayer稳定不卡流 在vue中使用比较方便 支持多种视频格式