5.1.4 • Published 8 months ago

@easydarwin/easyplayer v5.1.4

Weekly downloads
14
License
MIT
Repository
-
Last release
8 months ago

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视频显示区域的宽高比String16:9
autoplay自动播放Booleantrue
currentTime设置当前播放时间Number0
decode-type解码类型 仅支持flv (soft: 强制使用wasm模式)Stringauto
easyStretch是否不同分辨率强制铺满窗口Booleanfalse
live是否直播, 标识要不要显示进度条Booleantrue
loop是否轮播。Booleanfalse
muted是否静音Booleantrue
poster视频封面图片String-
reconnection视频出错时自动重连Booleanfalse
resolution仅支持hls流; 供选择的清晰度 fhd:超清,hd:高清,sd:标清String"yh,fhd,hd,sd"
resolutionDefault仅支持hls流String"hd"
video-url视频地址String-
has-audio是否渲染音频(音频有问题,请设置成false)仅支持flvBooleantrue
video-title视频右上角显示的标题String-
recordMaxFileSize录像文件大小(MB)Number200

事件回调

方法名说明参数
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

更多流媒体音视频资源

EasyDarwin开源流媒体服务器:www.easydarwin.org

Copyright © www.easydarwin.org Team 2012-2024

技术专线

188-5511-6262(同微信)

5.1.4

8 months ago

5.1.3

11 months ago

5.1.2

11 months ago

5.1.1

2 years ago

5.0.7

3 years ago

5.0.5

3 years ago

5.0.3

3 years ago

5.0.0

3 years ago

4.1.4

4 years ago

4.1.3

4 years ago

4.1.2

4 years ago

4.0.5

4 years ago

4.0.7

4 years ago

4.0.6

4 years ago

4.1.0

4 years ago

4.0.4

4 years ago

4.0.1

4 years ago

4.0.2

4 years ago

3.3.12

4 years ago

3.3.11

4 years ago

3.3.10

4 years ago

3.3.9

4 years ago

3.3.8

4 years ago

3.3.7

4 years ago

3.2.10

5 years ago

3.2.9

5 years ago

3.2.8

5 years ago

3.2.7

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.7

5 years ago

1.3.6

5 years ago

1.3.5

6 years ago

1.3.4

6 years ago

1.3.3

6 years ago

1.3.2

6 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.10

7 years ago

1.1.9

7 years ago

1.1.8

7 years ago

1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

7 years ago

1.1.4

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago