EasyPlayer系列已经持续迭代发布10年了!EasyPlayer.js是一款纯Web(H5)的直播流、点播流播放器。兼容几乎所有Web传输协议格式以及主流的音视频编码格式。具有低延时、高性能、兼容性强等特点。EasyPlayer.js H5播放器能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WERTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm、wcs等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器,使用简单, 功能强大。

EasyPlayer.js功能说明

  • 支持 MSE H264和H265硬解码;
  • 支持 WebCodec H264和H265硬解码;
  • 支持 WASM H264和H265硬解码/软解码;
  • 支持 m3u8/HLS (H265/H265)播放;
  • 支持 MPEG4格式(H264)播放;
  • 支持 HTTP-FLV/WS-FLV (H265/H265)播放;
  • 支持 HTTP-FMP4/WS-FMP4 (H265/H265)播放;
  • <支持 WEBRTC(easy支持H264/H265、其他流媒体支持H264)播放;
  • 支持 裸流(H264/H265) 播放;
  • 支持 直播和点播播放;
  • 支持 点播多清晰度播放;
  • 支持 全屏或比例显示;
  • 支持 电子放大;
  • 支持 水印(动态水印、幽灵水印);
  • 支持 显示上一个视频最后一帧;
  • 支持 播放器快照截图;
  • 支持 视频录制(WebM格式(音频+视频)、Mp4格式(视频),Flv格式(音频+视频));
  • 支持 超时、断网重连、异常暂停播放等;

配置属性

参数说明类型默认值
container播放器容器--
decoderwasm解码地址String-
isResize是否拉伸Booleantrue
loadingText加载显示的文字String加载中
videoBuffer加载显设置最小缓冲时长,单位秒,播放器会自动消除延迟。示的文字Number1
hasAudio是否解析音频Booleantrue
useMSEMSE模式Booleanfasle
useWCSWCS模式Booleanfasle
useSIMD强制使用wasm模式Booleanfalse
background视频封面图片String-
qualityConfig配置清晰Array[‘普清’, ‘高清’, ‘超清’, ‘4K’, ‘8K’]
defaultStreamQuality默认显示的清晰度,如果不设置,会显示第一个清晰度String-
isNotMute是否渲染音频Booleanfalse
recordType视频录制默认mp4格式Stringmp4,flv
playbackForwardMaxRateDecodeIFrame录像倍数Number-
debug控制台日志打印Booleanfalse
debugLevel打印日志级别默认warnStringdebug,warn

事件回调

事件名说明
play播放事件
pause暂时事件
videoInfo视频信息
audioInfo音频信息
mute音频
error播放异常
kBps当前网速, 单位KB 每秒1次,
recordEnd录制结束的事件
recordStart录制开始的事件
fullscreen当前是否全屏
streamQualityChange清晰度回调
playbackSeek录像时间轴跳转回调
playbackPreRateChange录像倍数的回调
currentPts监听当前渲染帧的时间戳(流里面的)

案例

EasyPlayrPro.on('play', function () {
    console.log('play');
})

错误 Type 类型说明


playError = 'playError'/** 播放错误,url 为空的时候,调用 play 方法 */
fetchError = 'fetchError'/** http 请求失败 */
websocketError = 'websocketError'/** websocket 请求失败 */
wasmDecodeError = 'wasmDecodeError'/** wasm 解码失败 */
hlsError = 'hlsError'/** hls 解码失败 */
webrtcError = 'webrtcError'/** webrtc 解码失败 */
webrtcClosed = 'webrtcClosed',/** webrtc 关闭 */
flvDemuxBufferSizeTooLarge = 'flvDemuxBufferSizeTooLarge'/** 缓冲区过大*/
audioChannelError = 'audioChannelError'/** 音频错误*/

EasyPlayrPro.on('error', function (type, msg) {
    console.log('error:', type, msg);
})
// 说明: type为错误类型,msg为错误详情。

方法

方法名说明参数
play播放‘url’
playback播放录像
pause暂停播放
isPause返回是否暂停中状态
setBufferTime设置最大缓冲时长1
setVolume设置音量
getVolume获取音量
exitFullscreen退出全屏
mute静音
cancelMute取消静音
isMute返回是否静音
screenshot获取快照
setFullscreen全屏(取消全屏)播放视频
setStreamQuality设置分辨率必须是qualityConfig里面的数据
forward设置录像倍数
setPlaybackStartTime设置录像跳转时间/s
getVideoInfo获取视频信息
getAudioInfo获取音频信息
destroy关闭视频,释放底层资源

screenshot 截图,调用后弹出下载框保存截图

filename: 可选参数, 保存的文件名, 默认 时间戳
format : 可选参数, 截图的格式,可选png或jpeg或者webp ,默认 png
quality: 可选参数, 当格式是jpeg或者webp时,压缩质量,取值0 ~ 1 ,默认 0.92
type: 可选参数, 可选download或者base64或者blob,默认download

案例:

const base64 = EasyPlayerPro.screenshot("test", "png", 0.5, 'base64')

EasyPlayer.js是免费的!

EasyPlayer一如既往回报社会,免费为大家提供,you have my words!

https://github.com/EasyDarwin/EasyPlayer.js

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐