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中使用比较方便
支持多种视频格式

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

vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
vue项目中，amr格式的音频播放
在vue项目中,使用电脑浏览器播放amr格式的音频文件是直接播放不出来的,需要使用一个js包:benz-amr-recorder 1.npm install benz-amr-recorder 2.想 ...
在vue项目中实现海康威视IOT云眸平台（实时和回放）
上次我们已经提到海康ISC平台的应用,详见在vue项目中实现海康威视ISC平台(实时和回放) 这次记录下海康云眸平台的应用,风格与上一篇文章保持一致,方便食用. 环境先下载安装海康插件HikOpen ...
使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
vue项目中实现语音队列的依次播放
vue项目中实现语音队列的依次播放需求分析通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.再次我们主要着重介绍语音依次播放的功能. 那怎样实 ...
在vue项目中实现海康威视ISC平台（实时和回放）
最近项目中需要用到海康威视的摄像头进行实时视频.回放.预警等功能.现记录一下开发过程中遇到的问题. 环境先下载安装海康插件VideoWebPlugin.exe 代码分享 index.html 在in ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...

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

EasyPlayer 介绍

实战中使用

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

最新文章

热门文章