h265web.js - 即将支持HDR10!

一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器

DEMO: https://www.zzsin.com/h265webjs.html

h265web.js	mpeg.js `(解析ts)`	h265web.js 底层265解码器SDK	LICENSE
h265web.js	MPEG-Demuxer.js	h265web.js-wasm-decoder	License GPL-3.0

Remind!

因为使用软解码能力（浏览器上无法做硬解码加速与汇编优化）,故设备电脑配置性能会影响播放器性能！

请注意：

视频帧率最好 <= 30fps
- 建议：24fps
视频码率最好 <= 1.5Mb
- 建议：300~600kbps (HEVC/H.265可提供较高的压缩率)

更新日志	内容
时间	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能力不可用,今天已紧急修复. _! 谢谢所有支持h265web的工程师朋友们！
时间	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` 事件回调，播放结束调用

@TODO	内容
1	增加http-flv直播能力
2	Vue Demo
3	React Demo

当前能力

协议

协议	模式	是否支持	说明
mp4	点播	是	----
mpeg-ts	点播	是	----
m3u8	点播	是	----
hls	直播	是	----
H.265	点播	是	----
H.265	直播	是	----
http-flv	直播	否	待支持
flv	点播	是	备用播放内核模式,不需要填写

能力

能力	是否支持	其他
直播	是	----
点播	是	----
Seek跳转	是	----
精准Seek	是	----
封面图	是	----
边下边播	是	----
音量调节	是	----
播放	是	----
暂停	是	----
重新播放	是	----
暂停截图	是	----
1080p播放	是	----
720p播放	是	----
多路播放	是	----
去音频播放	是	----
缓冲进度	是	----
开启全屏播放	是	----
退出全屏播放	是	----

当前版本的token

token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";

联系我

Github: https://github.com/numberwolf/h265web.js
Email(porschegt23@foxmail.com)
QQ: 531365872
QQ技术支持群: 925466059
Discord:numberwolf#8694
微信:numberwolf11

线上demo

https://www.zzsin.com/h265webjs.html

效果预览

类型	示例图
点播
直播

1 快捷方式使用

使用流程也可以直接看 play.js和index.html的Demo使用
本项目可以直接放在你的web服务器目录下访问index.html

2 播放器SDK使用文档

———————— API以及事件能力

如果想使用底层的265解码器能力可以看 h265web.js-wasm-decoder

安装

注意：不要从npm商店引入！请用github仓库下载后引入！因为npm商店对wasm不友好

注意：.wasm 文件请放置于你通过`webpack`/`browerify`等打包工具打包出来的js相同目录下！不然无法使用！！！或者直接用我打包好的dist文件夹下的js和wasm单独引入

1）引入包

方式1.1：引入Github的本地文件 require形式

// 引入Github的本地文件
require('./dist/h265webjs');

方式1.2：引入Github的本地文件 import xxx from xxx形式（推荐）

// 引入Github的本地文件
import H265webjsModule from './dist/index';

2）安装Wasm

从Github下载dist。

3）引入h265web.js到你的项目

本地引入（从Github h265web.js）

1）require形式

 require('./dist/h265webjs');

2）import xxx from xxx形式（推荐）

 // 引入Github的本地文件
 import H265webjsModule from './dist/index';

播放器配置

创建代码如下

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:忽略音频播放

初始化播放器

务必注意！！！

请将你整体项目最终编译出来的JS目标文件 与 wasm文件放置于同一级目录

例如

	./dist/你最终编译产出.js
	./dist/missile.wasm
	./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
     }
 };

2）创建播放器

1. 以require('./src/h265webjs');引入为前提

示例：

 let player = new265webjs(videoURL, config); // 全局方法

1. 以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完成

主要用于SEEK完成做一些操作

示例

player.onSeekFinish = () => {
    // todo
};

YUV帧数据渲染

回调参数	类型	默认值	必填	说明
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
};

播放器当前播放PTS时刻更新

回调参数	类型	默认值	必填	说明
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
};

播放器API能力

加载播放器

一般在配置完成【播放器配置】和【事件】之后进行播放器加载

示例

player.do();

获取当前播放状态

调用函数	返回	说明
isPlaying()	bool	是否正在播放中

示例

if (player.isPlaying()) {
	// 正在播放中
} else {
	// 当前是暂停状态
}

开始播放

调用函数	返回	说明
play()	-	开始播放

示例

player.play();

暂停播放

调用函数	返回	说明
pause()	-	暂停播放

示例

player.pause();

渲染过程中回调YUV帧数据

开启之后，onRender事件才可以收到数据

调用函数	返回	说明
setRenderScreen(`{param1}`)	-	开启/关闭渲染过程中回调YUV帧数据

参数

参数	类型	默认值	说明
param1	bool	false	开启/关闭渲染过程中回调YUV帧数据

示例

// 开启
player.setRenderScreen(true);
// 关闭
player.setRenderScreen(false);

Seek跳转到某个时刻

调用函数	返回	说明
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
videoType: "vod" // 点播vod 直播live

示例

let mediaInfo = player.mediaInfo();

全屏播放

调用函数	返回	说明
fullScreen()	-	全屏播放

示例

player.fullScreen();

退出全屏播放

调用函数	返回	说明
closeFullScreen()	-	退出全屏

示例

player.closeFullScreen();

3 其它

捐赠

微信	支付宝	PayPal
		TODO

FFmpeg转码265编码的视频

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

Files

README.MD

Latest commit

History