市场上能找到的支持的能力最多的HEVC/H.265网页播放器.
流媒体服务推荐用 ZLMediaKit(https://github.com/ZLMediaKit/ZLMediaKit) - 更好用的流媒体服务
一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器
Feature | Feature | Feature | Feature |
---|---|---|---|
HLS(LIVE) | M3u8(VOD) | MP4(VOD) | FLV(VOD) |
HTTP-FLV(LIVE) | HTTP-TS(LIVE) | WS-FLV(LIVE) | WS-TS(LIVE) |
商业化 |
. | ||
MPEG-TS(VOD) | G711A | HDR10(BT2020) | . |
- QQ技术支持群: 925466059
- 微信: numberwolf11(私聊咨询付费, 免费技术咨询请加QQ群)
- Github: https://github.com/numberwolf
- Email: [email protected]
- Discord:numberwolf#8694
简易Demo - 方便读代码 index-debug.html
h265web.js | mpeg.js (解析ts) |
h265web.js 底层265解码器SDK | LICENSE |
---|---|---|---|
h265web.js | MPEG-Demuxer.js | h265web.js-wasm-decoder | License GPL-3.0 |
因为使用软解码能力(浏览器上无法做硬解码加速 与 汇编优化),故设备电脑配置性能 会 影响播放器性能!
请注意:
-
视频帧率最好 <= 30fps
- 建议:24fps
-
视频码率最好 <= 1.5Mb
- 建议:300~600kbps (HEVC/H.265可提供较高的压缩率)
@TODO | 内容 |
---|---|
1 | 增加HDR10 BT.2020能力 |
- 协议
协议 | 模式 | 是否支持 | 说明 |
---|---|---|---|
mp4 | 点播 | 是 | ---- |
ts | 点播 | 是 | ---- |
m3u8 | 点播 | 是 | ---- |
hls | 直播 | 是 | ---- |
HEVC/H.265 | 点播 | 是 | ---- |
HEVC/H.265 | 直播 | 是 | ---- |
AVC/H.264 | 点播 | 是 | ---- |
AVC/H.264 | 直播 | 是 | ---- |
http-flv | 直播 | 是 | CodecID=12 |
flv | 点播 | 是 | 备用播放内核模式,不需要填写 |
websocket-flv | 直播 | 是 | ---- |
websocket-ts | 直播 | 是 | ---- |
http-ts | 直播 | 是 | ---- |
- 能力
能力 | 是否支持 | 其他 |
---|---|---|
直播 | 是 | ---- |
点播 | 是 | ---- |
Seek跳转 | 是 | ---- |
精准Seek | 是 | ---- |
封面图 | 是 | ---- |
边下边播 | 是 | ---- |
音量调节 | 是 | ---- |
播放 | 是 | ---- |
暂停 | 是 | ---- |
重新播放 | 是 | ---- |
暂停截图 | 是 | ---- |
1080p播放 | 是 | ---- |
720p播放 | 是 | ---- |
多路播放 | 是 | ---- |
去音频播放 | 是 | ---- |
缓冲进度 | 是 | ---- |
开启全屏播放 | 是 | ---- |
退出全屏播放 | 是 | ---- |
token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
https://www.zzsin.com/h265webjs.html
简易Demo - 方便读代码 index-debug.html
类型 | 示例图 |
---|---|
点播 | |
直播 |
-
简易Demo - 方便读代码 index-debug.html
-
本项目可以直接放在你的
web服务器
目录下访问index.html
简易Demo - 方便读代码 index-debug.html
———————— API以及事件能力
如果想使用底层的265解码器能力 可以看 h265web.js-wasm-decoder
-
用普通js(不编译)直接引入原始js文件
-
简易Demo - 第一次使用看这里 index-debug.html
-
demo: example_normal
<script src="dist/missile.js"></script> <script src="dist/h265webjs-v20211016.js"></script>
-
-
用ES编译引入的语法
-
demo: example
-
方式1.1:引入Github的本地文件
require
形式
// 在index.html引入wasm <script src="dist/missile.js"></script> // 在js文件引入Github的本地文件 require('./dist/h265webjs');
- 方式1.2:引入Github的本地文件
import xxx from xxx
形式 (推荐)
// 在index.html引入wasm <script src="dist/missile.js"></script> // 在js文件 引入Github的本地文件 import H265webjsModule from './dist/index';
-
- 从Github下载dist。
- 本地引入(从Github h265web.js)
- 创建代码如下
const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器内核
const PLAYER_CORE_TYPE_CNATIVE = 1; // 实验播放器内核
var config = {
player: "glplayer",
width: 960,
height: 540,
token : token,
extInfo : {
moovStartFlag : true
}
};
- 配置详解
配置项 | 类型 | 可选值 | 必填 | 说明 |
---|---|---|---|---|
type | String | mp4/hls/ts/raw265/flv | 否 | 播放文件的类型,不填写自动识别 |
player | String | - | 是 | 播放窗口的dom的id值 |
width | Int | - | 是 | 播放窗口的宽度 |
height | Int | - | 是 | 播放窗口的高度 |
token | String | - | 是 | 播放器token值 |
extInfo | Object | - | 否 | 播放器额外配置 |
+ moovStartFlag | Bool | true/false | 否:默认false | Mp4的moov box是否前置 关联到动态加载 |
+ rawFps | Float32 | 例如:30 | 否:默认24 | HEVC/AVC裸流播放时候的帧率设定 |
+ autoCrop | Bool | - | 否:默认false | 如果播放器配置的长宽与视频纵横比不匹配,自动裁剪黑边区域 |
+ core | Int | - | 否:默认0 | 0:默认播放内核 1:备用播放内核 |
+ coreProbePart | Float32 | - | 否:默认1.0 | 探测Mp4媒体的属性,百分比 0.0~1.0 ,正常moov前置的文件都用0.1(10%)可以(只适用于备用播放内核) |
+ ignoreAudio | Int | - | 否:默认0 | 0:带音频播放 1:忽略音频播放 |
+ probeSize | Int | - | 否:4096 | HTTP-FLV直播模式下的探测长度 |
- 务必注意!!!
请将你整体项目最终编译出来的JS目标文件
与 wasm文件
放置于同一级目录
- 例如
./dist/你最终编译产出.js
./dist/sdk file
./index.html
- 创建方法(全局方法)
new265webjs(
播放地址
,播放器配置
)
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
播放地址 | String | - | 是 | 播放视频地址 |
播放器配置 | Object | - | 是 | 播放器配置信息 |
-
创建示例Demo
-
1)路径 + 配置
- 例子1 创建
mp4/hls/ts
类型播放器
let videoURL = "h265_test.mp4"; let config = { player: "glplayer", width: 960, height: 540, token : token, extInfo : { moovStartFlag : true } };
- 例子2 创建
raw265
类型 播放h265裸流 播放器(包括直播)
let config = { type: "raw265", player: "glplayer", width: 960, height: 540, token : token, extInfo : { rawFps : 30 // 播放帧率 } }; * 例子3 创建`FLV`点播播放器 ```javascript const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器 const PLAYER_CORE_TYPE_CNATIVE = 1; // 备用播放内核 let config = { player: "glplayer", width: 960, height: 540, token : token, extInfo : { moovStartFlag : true, coreProbePart : 0.1, ignoreAudio : 0 } };
- 例子1 创建
-
2)创建播放器
-
- 以普通script src方式引入
示例:
let player = window.new265webjs(url, config);
-
- 以
require('./src/h265webjs');
引入为前提
- 以
示例:
let player = new265webjs(videoURL, config); // 全局方法
-
- 以
import H265webjsModule from './dist/index';
引入为前提 (推荐)
- 以
示例:
let player = H265webjsModule.createPlayer(videoURL, config);
-
- 如果创建的是
raw265
类型的裸流数据播放 请注意
这部分fetch请求网络数据以及异步喂数据的过程 请自行改写,下面给出的仅仅是一个demo,网络IO和解析265流为帧数据会非常耗时。
如果你可以通过websocket直接一帧一帧传输的话,那么只需要调用喂265数据的函数即可。
raw265
类型下,喂一帧一帧H.265播放
调用函数
函数 返回 说明 append265NaluFrame NULL 喂一帧265数据 参数
参数 类型 默认值 必填 说明 frame Uint8Array - 是 一帧265数据 例子 - 这里直接将265文件通过网络串流传输
// // fetch 265 // you can use your code to fetch vod stream // only need `h265webjs.append265NaluFrame(nalBuf);` to append 265 frame // let rawParser = new RawParserModule(); let fetchFinished = false; let startFetch = false; let networkInterval = window.setInterval(() => { if (!startFetch) { startFetch = true; fetch(url265).then(function(response) { let pump = function(reader) { return reader.read().then(function(result) { if (result.done) { // console.log("========== RESULT DONE ==========="); fetchFinished = true; window.clearInterval(networkInterval); networkInterval = null; return; } let chunk = result.value; rawParser.appendStreamRet(chunk); return pump(reader); }); } return pump(response.body.getReader()); }) .catch(function(error) { console.log(error); }); } }, 1); // fps>=30 play else cache let naluParseInterval = window.setInterval(() => { if (nalBuf != false) { // require h265webjs.append265NaluFrame(nalBuf); } else if (fetchFinished) { window.clearInterval(naluParseInterval); naluParseInterval = null; } }, 1);
- 如果创建的是
-
-
主要用于SEEK完成做一些操作
- 示例
player.onSeekFinish = () => {
// todo
};
回调参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
width | int | - | - | YUV宽度 |
height | int | - | - | YUV高度 |
imageBufferY | Uint8Array | - | - | Y分量 |
imageBufferB | Uint8Array | - | - | ChromaB分量 |
imageBufferR | Uint8Array | - | - | ChromaR分量 |
可以利用事件回调的YUV做全屏播放
需要调用
setRenderScreen
函数开启才可以收到事件回调数据, 下方1.5 API
会说明
- 示例
player.onRender = (width, height, imageBufferY, imageBufferB, imageBufferR) => {
// todo
};
媒体文件当前加载成功,可以进行播放
- 示例
player.onLoadFinish = () => {
// todo
};
回调参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
videoPTS | float64 | - | - | 当前播放时间 |
- 示例
player.onPlayTime = (videoPTS) => {
// todo
console.log(videoPTS)
};
- 示例
player.onPlayFinish = () => {
// finished
};
回调参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
cPts | float64 | - | - | 当前缓冲进度时间 |
- 示例
player.onCacheProcess = (cPts) => {
// console.log("onCacheProcess => ", cPts);
};
- 示例
player.onReadyShowDone = () => {
// console.log("onReadyShowDone");
// to play 封面图加载完成了
};
- 示例
player.onLoadCache = () => {
// caching frames
};
- 示例
player.onLoadCacheFinshed = () => {
// cache finished
};
- 示例
player.onOpenFullScreen = () => {
// todo
};
- 示例
player.onCloseFullScreen = () => {
// todo
};
一般在配置完成【播放器配置】和【事件】之后进行播放器加载
- 示例
player.do();
调用函数 | 返回 | 说明 |
---|---|---|
isPlaying() | bool | 是否正在播放中 |
- 示例
if (player.isPlaying()) {
// 正在播放中
} else {
// 当前是暂停状态
}
调用函数 | 返回 | 说明 |
---|---|---|
play() | - | 开始播放 |
- 示例
player.play();
调用函数 | 返回 | 说明 |
---|---|---|
pause() | - | 暂停播放 |
- 示例
player.pause();
开启之后,
onRender
事件才可以收到数据
调用函数 | 返回 | 说明 |
---|---|---|
setRenderScreen({param1} ) |
- | 开启/关闭渲染过程中 回调YUV帧数据 |
- 参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
param1 | bool | false | 开启/关闭渲染过程中 回调YUV帧数据 |
- 示例
// 开启
player.setRenderScreen(true);
// 关闭
player.setRenderScreen(false);
调用函数 | 返回 | 说明 |
---|---|---|
seek({pts} ) |
- | Seek到某一个时刻 |
- 参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
pts | float64 | - | Seek到某一个时刻的时间点 |
- 示例
// Seek到10.01秒
player.seek(10.01);
调整视频的播放音量
调用函数 | 返回 | 说明 |
---|---|---|
setVoice({volume} ) |
- | 调整音量 |
- 参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
volume | float64 | - | 范围区间是[0, 1.0] , 0为mute,1.0为全开音量 |
- 示例
// 音量开启一半
player.setVoice(0.5);
获取当前播放的视频文件的信息数据
调用函数 | 返回 | 说明 |
---|---|---|
mediaInfo() | Object | 媒资详情 |
- 返回值示例
meta:
audioNone: false // 是否不包含音频轨
durationMs: 600000 // 时长 毫秒级
fps: 25 // 帧率
sampleRate: 44100 // 音频采样率
size: // 视频分辨率
height: 720
width: 1280
videoCodec: 0 // 0:HEVC/H.265 1:其他编码
isHEVC: true // 是否是H265编码视频
videoType: "vod" // 点播vod 直播live
- 示例
let mediaInfo = player.mediaInfo();
调用函数 | 返回 | 说明 |
---|---|---|
fullScreen() | - | 全屏播放 |
- 示例
player.fullScreen();
调用函数 | 返回 | 说明 |
---|---|---|
closeFullScreen() | - | 退出全屏 |
- 示例
player.closeFullScreen();
调用函数 | 返回 | 说明 |
---|---|---|
release() | - | 释放播放器资源 |
- 示例
player.release();
微信 | 支付宝 | PayPal |
---|---|---|
TODO |
- mp4
ffmpeg -i input.mp4 \
-vcodec libx265 -pix_fmt \
-acodec aac -ac 2 -ar 44100 \
-preset medium -maxrate 1000k -bufsize 1000k \
-vtag hev1 \
-movflags faststart \
-y video.mp4
- hls/m3u8 录屏
ffmpeg -f avfoundation -i 1:0 \
-q 4 -r 10 \
-filter_complex "scale=1280:720" \
-pix_fmt yuv420p \
-vcodec libx265 \
-ar 22050 -ab 64k -ac 1 -acodec aac \
-threads 4 \
-preset veryfast \
-f segment \
-segment_list test.m3u8 \
-segment_time 5 \
-y /Users/numberwolf/Documents/webroot/VideoMissile/VideoMissilePlayer/res/hls1/v-%03d.ts
- mpeg-ts
ffmpeg -ss 20 -t 10 -i ./res/xinxiaomen.mp4 \
-vcodec libx265 -x265-params "bframes=0:keyint=10" -r 24 -filter_complex "scale=720:1280" -preset fast -maxrate 800k -bufsize 800k \
-acodec aac -ar 22050 -ac 1 \
-pix_fmt yuv420p \
-f mpegts -y ./res/veilside2.ts
更新日志 | 内容 |
---|---|
时间 | 2022/01/17 |
- | 0.解决ISSUE HLS 265内存泄露问题 numberwolf#108 |
- | 1.解决ISSUE HLS Split Rules numberwolf#105 |
- | 2.增加新Demo index-debug.html |
- | 3.解决10+窗口264播放引起堆栈异常 |
时间 | 2021/12/31 |
- | 0.增加 H.264 HTTP-FLV 失败后Retry |
时间 | 2021/12/24 |
- | 0.修复 H.264 HTTP-FLV 部分流无回调问题 |
时间 | 2021/12/19 |
- | 0.修复 H.264 HLS 回调不响应的问题 |
时间 | 2021/12/08 |
- | 0.修复 H.264 MP4 onReadyShowDone回调问题 |
时间 | 2021/12/04 - 凌晨 |
- | 0.修复 http-flv 265 渲染上下文Crash问题 |
- | 1.修复 hls播放全屏错误 |
- | 2.修复 一些播放问题 |
时间 | 2021/11/29 - 夜 |
- | 0.修复 http-flv起播重试问题、修复一些bug |
时间 | 2021/11/25 - 夜 |
- | 0.修复 httpflv/ws直播 ignoreAudio配置失效问题 |
时间 | 2021/11/23 - 夜 |
- | 0.修复 numberwolf#90 |
时间 | 2021/11/21 - 凌晨 |
- | 0.支持 Websocket-FLV播放 (HEVC/H.265) |
- | 1.支持 Websocket-TS播放 (HEVC/H.265) |
- | 2.支持 HTTP-TS播放 (HEVC/H.265) |
时间 | 2021/11/16 - 晚 |
- | 0.视频流首次请求无数据返回则进行重试5次 |
时间 | 2021/11/15 - 晚 |
- | 0.HTTP-FLV直播断流retry重试 7s一次 |
时间 | 2021/11/14 - 晚 |
- | 0.增加256M内存版本的WASM依赖(可内存增长) |
- | 0.增加512M内存版本的WASM依赖(可内存增长) |
时间 | 2021/11/04 - 晚 |
- | 0.修复频繁release出现crash |
时间 | 2021/10/26 - 晚 |
- | 0.修复一些问题 |
时间 | 2021/10/24 - 晚 |
- | 0.支持AVC/H.264编码的MP4/HLS/M3u8/FLV/HTTP-FLV |
时间 | 2021/10/18 - 晚 |
- | 0.新增DEMO |
时间 | 2021/10/16 - 晚 |
- | 0.修复HTTP-FLV返回Mediainfo的Codec参数不准的问题 |
- | 1.更新Demo |
时间 | 2021/10/14 - 晚 |
- | 0.修复返回Mediainfo的Codec参数不准的问题 |
时间 | 2021/10/13 - 晚 |
- | 0.兼容VUE等框架IDE调试问题,剥离WASM模块单独Script引入 |
时间 | 2021/10/12 - 晚 |
- | 0.支持HTTP-FLV(HEVC) 兼容无帧率参数视频,优化 |
时间 | 2021/10/09 - 凌晨 |
- | 0.支持HTTP-FLV(HEVC) 直播播放 CodecID=12 |
- | 0.MP4/FLV(VOD) 优化缓存区域外Seek速度性能 |
时间 | 2021/09/27 - 晚 |
- | 0.M3u8/MpegTS 优化缓存区域外Seek速度性能 |
时间 | 2021/09/25 - 凌晨 |
- | 0.HLS直播 解决长时直播内存泄露问题 |
- | 1.HLS直播 解决HLS TS分片全路径不兼容问题 |
- | 2.HLS直播 解决断流导致停播问题 |
- | 3.HLS直播 解决网络不稳定导致停播问题 |
时间 | 2021/09/08 - 晚 |
- | 0.M3U8 Seek导致花屏问题 |
- | 1.MP4 部分用户上报花屏问题 |
- | 2.入口配置项缩减,部分配置选项去除,改为自动化配置 |
时间 | 2021/09/07 - 晚 |
- | 0.M3U8 内核解决部分解析错误 |
时间 | 2021/09/07 - 凌晨 |
- | 0.备用播放内核更新 - 点播MP4/FLV Seek BUG解决不能seek 0, 播放性能优化 |
时间 | 2021/08/15 |
- | 0.H265/HEVC 原始流文件/直播 播放优化、Demo优化 |
时间 | 2021/07/18 |
- | 0.播放器UI改造升级 |
- | 1.支持全屏播放能力 |
- | 2.全屏播放回调事件 |
时间 | 2021/07/11 |
- | 0.兼容 ZLMediaKit + 华为摄像头推的流 |
时间 | 2021/07/04 |
- | 0.修复 ISSUE#58 (默认内核缓存状态下的暂停问题) |
时间 | 2021/07/01 |
- | 0.增加示例 与 编译所需 |
时间 | 2021/06/27 |
- | 0.开源! |
- | 1.支持了FLV视频播放Seek能力 |
- | 2.解决了新播放内核的SEEK问题 |
- | 3.FLV播放新类型支持, 以及不需要设置播放内核 |
时间 | 2021/05/30 |
- | 1.解决了一些Seek和播放的bug(比较重要的升级) |
- | 2.播放器封面图加载完成 事件通知 |
时间 | 2021/05/24 |
- | 1.FLV点播支持(在备用播放内核模式下可用) |
时间 | 2021/05/21 |
- | 1.HLS(无声直播)性能优化 |
时间 | 2021/05/18 |
- | 1.HLS(直播)性能优化、增加声音Case |
时间 | 2021/05/16 |
- | 1.MP4点播兼容BD265产出部分特殊box case |
时间 | 2021/05/15 |
- | 1.修复HLS直播的部分问题 以及嵌套型的HLS |
时间 | 2021/04/27 |
- | 1.修复部分视频播放中马赛克问题 |
- | 2.修复部分视频第一个GOP马赛克问题 |
时间 | 2021/04/22 |
- | 1.备用播放内核模式 增加Seek功能 |
- | 2.备用播放内核模式 兼容yuvj420p |
- | 3.一些其他细节的完善 |
时间 | 2021/04/12 |
- | 1.修复了默认内核播放 hev错误的问题 |
- | 2.修复了默认内核播放 部分nalu错误的问题 |
- | 3.修复了默认内核播放 部分花屏问题 |
时间 | 2021/04/07 |
- | 1.时长错误问题 |
时间 | 2021/03/28 |
- | 1.增加缓冲进度条 |
- | 2.解决了一些Bug,优化了一些性能 |
- | 3.移出HLS播放的无用日志 |
- | 4.增加去音频播放选项(新内核) |
时间 | 2021/03/14 |
- | 1.备用播放内核模式 |
时间 | 2021/03/12 |
- | 1.很抱歉,这几天事情交织在一起,有些累,因为我的个人疏忽,导致HLS/M3u8能力不可用,今天已紧急修复. |
时间 | 2021/03/06 |
- | 1.备用播放内核模式,解决多路窗口播放加载失败问题 |
时间 | 2021/02/28 |
- | 1.开放给H.265解码器喂完整的265nalu帧函数 append265NaluFrame(nalBuf); |
- | 2.开放新库,解析h265流为帧数据的工具 raw-parser.js |
时间 | 2021/02/21 |
- | 1.更新底层265解码器SDK项目 - https://github.com/numberwolf/h265web.js-wasm-decoder |
时间 | 2021/02/18 |
- | 1.备用播放内核模式,增加音频播放能力 |
时间 | 2021/02/08 |
- | 1.增加播放内核类型:备用播放内核模式,可兼容多种解码Badcase(测试阶段, 输入媒资Mp4Box需要前置Moov,当前还不支持音频、Seek) |
时间 | 2021/01/04 |
- | 1.支持H.265的流式接入,可直接以265的URI进行播放、也可以流式字节填充播放(可应用于直播) |
- | 2.取消了播放器自带的播放view蒙板(用于点击播放画面触发暂停/播放能力),开放给用户自行实现 |
- | 3.支持 如果播放器配置的长宽与视频纵横比不匹配,自动裁剪黑边区域 |
- | 4.增加onPlayFinish 事件回调,播放结束调用 |