@easydarwin/easyplayer NPM

EasyPlayer.js

简介

集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大； EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS、WEBRTC、FMP4视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。

功能说明

支持重连播放；
支持 WASM H264和H265解码;
支持 m3u8/HLS (H265/H265)播放;
支持 HTTP-FLV/WS-FLV (H265/H265)播放;
支持 WEBRTC(H264/H265)播放;
支持 MP4 播放
支持直播和点播播放;
支持点播多清晰度播放;
支持全屏或比例显示;
支持播放器快照截图;
支持视频录制Mp4格式;
支持超时、断网重连、异常暂停播放等;
支持解析视频i帧文件转base64;
自动检测 IE 浏览器兼容播放;

配置属性

参数	说明	类型	默认值
alt	视频流地址没有指定情况下, 视频所在区域显示的文字	String	无信号
aspect	视频显示区域的宽高比	String	16:9
autoplay	自动播放	Boolean	true
currentTime	设置当前播放时间	Number	0
decode-type	解码类型仅支持flv (soft: 强制使用wasm模式）	String	auto
easyStretch	是否不同分辨率强制铺满窗口	Boolean	false
live	是否直播, 标识要不要显示进度条	Boolean	true
loop	是否轮播。	Boolean	false
muted	是否静音	Boolean	true
poster	视频封面图片	String	-
reconnection	视频出错时自动重连	Boolean	false
resolution	仅支持hls流; 供选择的清晰度 fhd:超清，hd:高清，sd:标清	String	"yh,fhd,hd,sd"
resolutionDefault	仅支持hls流	String	"hd"
video-url	视频地址	String	-
has-audio	是否渲染音频（音频有问题,请设置成false）仅支持flv	Boolean	true
video-title	视频右上角显示的标题	String	-
recordMaxFileSize	录像文件大小(MB)	Number	200

事件回调

方法名	说明	参数
play	播放事件
pause	暂时事件
error	播放异常
ended	播放结束或直播断流
timeupdate	当前播放时间回调	currentTime

方法

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

HTML集成方式

<!DOCTYPE html>
<html>
<head>
  <title>EasyPlayerJS</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 全局引入 -->
  <script type="text/javascript" src="EasyPlayer-element.min.js"></script>
</head>
    <body>
        <easy-player
            video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
            live="false"
            stretch="true" >
        </easy-player>
    </body>
</html>

VUE集成方式

npm install @easydarwin/easyplayer --save

注意：需要手动拷贝的文件

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到静态文件根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到静态文件根目录

按需：H265解码需要 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到静态文件根目录

<!-- VUE HTML模板 引入JS-->
<!-- 注意：如果需要用到H265编码 WASM文件需要放到根目录-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
  <title>EasyPlayer-demo</title>
  <!-- 全局引入 -->
  <script src="./EasyPlayer-lib.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

<!-- VUE文件中使用 -->
<easy-player
  live
  muted
  autoplay
  :video-url="camera.videoSrc"
  style="width: 100%;height: 200px"
  @error="restartPlayer"
/>

...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }

更多案例：https://github.com/EasyDarwin/EasyPlayer.js