VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频
简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大;功能支持支持 MP4 播放支持 m3u8/HLS 播放;支持 HTTP-FLV/WS-FLV 播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自动检测 IE 浏览器兼容播放;支持重连播放;官网(可在线调试)NPM文档。EasyPlaye
·
EasyPlayer 介绍
简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大;
功能支持
:
- 支持 MP4 播放
- 支持 m3u8/HLS 播放;
- 支持 HTTP-FLV/WS-FLV 播放;
- 支持直播和点播播放;
- 支持播放器快照截图;
- 支持点播多清晰度播放;
- 支持全屏或比例显示;
- 自动检测 IE 浏览器兼容播放;
- 支持重连播放;
实战中使用
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中使用比较方便
- 支持多种视频格式
更多推荐
所有评论(0)