当前位置:   article > 正文

VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频

easyplayer

EasyPlayer 介绍

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

功能支持:

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

官网(可在线调试)
NPM文档

实战中使用

VUE 中怎样集成 EasyPlayer

npm install @easydarwin/easyplayer --save
  • 1

在VUE中使用EasyPlayer还需要配置一些文件才能使用
按需引入编码格式EasyPlayer.wasm文件(作用自行官网查看)
必须引入 EasyPlayer-element.min.js文件

注意:

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

组件中引入注册:

import EasyPlayer from '@easydarwin/easyplayer'
 components: {
    EasyPlayer
 },
  • 1
  • 2
  • 3
  • 4

使用

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

关于VUE中使用的配置属性

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

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

使用评价:

  1. EasyPlayer稳定不卡流
  2. 在vue中使用比较方便
  3. 支持多种视频格式
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/790736
推荐阅读
相关标签
  

闽ICP备14008679号