h265web.js v2.2.2

h265web.js

h265web.js	mpeg.js (解析ts)

License GPL-3.0 https://www.gnu.org/licenses/gpl-3.0.md

README.md：中文 | English

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

~^_^~ 作者用爱发电 如果 h265web.js 帮助到了你，请点击右上角的star~

目录

• 0、说明

  	- [当前能力](#当前能力)
  
  	- [当前版本token](#当前版本的token)
  
  	- [联系我](#联系我)
  
  	- [线上demo](#线上demo)
  
  	- [效果预览](#效果预览)

• 1、快捷方式使用

• 2、播放器SDK使用文档

  	- [安装](#安装)
  
  	- [播放器配置](#播放器配置)
  
  	- [初始化播放器](#初始化播放器)
  
  	- [播放器相关事件绑定](#播放器相关事件绑定)
  
  	- [播放器API能力](#播放器api能力)

• 3、其它帮助

  	- [FFmpeg转码265编码的视频](#ffmpeg转码265编码的视频)

0、说明

当前能力

• 协议

• 能力

当前版本的token

token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";

联系我

• Github: https://github.com/numberwolf/h265web.js
• Email(porschegt23@foxmail.com)
• QQ: 531365872
• Discord:numberwolf#8694
• 微信:numberwolf11

线上demo

http://hevc.xvideo.video

效果预览

1、快捷方式使用

• 使用流程也可以直接看 play.js和index.html的Demo使用

• 本项目可以直接放在你的web服务器目录下访问index.html

2、播放器SDK使用文档

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

安装

1）引入包

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

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

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

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

• 方式2：从npm商店引入

| npm:h265web.js

2）安装Wasm

• 如果使用了直接从Github下载dist的话这一步可以跳过。

• 如果用npm方式进行安装，则需要将./node_modules/h265web.js/dist/*.wasm拷贝到你的h265webjs.js同级目录下才可以。

  	* 示例Cmd
  
  	```bash
  	npm i h265web.js
  	cp ./node_modules/h265web.js/dist/*.wasm ./dist/
  	```

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

• 本地引入（从Github h265web.js）

  	* 1）require形式
  	```javascript
  	require('./dist/h265webjs');
  	```
  
  	* 2）`import xxx from xxx`形式 （推荐）
  	```javascript
  	// 引入Github的本地文件
  	import H265webjsModule from './dist/index';
  	```

• npm形式引入

const H265webjs = require('h265web.js');

播放器配置

• 创建代码如下

const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器内核
const PLAYER_CORE_TYPE_CNATIVE = 1; // 实验播放器内核

var config = {
    type: "mp4",
    player: "glplayer",
    width: 960,
    height: 540,
    accurateSeek : true,
    token : token,
    extInfo : {
        moovStartFlag : true,
        readyShow : true,
        rawFps : 30,
        autoCrop : false,
        core : PLAYER_CORE_TYPE_DEFAULT
    }
};

• 配置详解

初始化播放器

• 创建方法(全局方法)

new265webjs(播放地址, 播放器配置)

• 创建示例Demo

  	* 1）路径 + 配置
  		* 例子1 创建 `mp4/hls/ts`类型播放器
  
  		```javascript
  		let videoURL = "h265_test.mp4";
  		let config = {
  		    type: "mp4",
  		    player: "glplayer",
  		    width: 960,
  		    height: 540,
  		    accurateSeek : true,
  		    token : token,
  		    extInfo : {
  		        moovStartFlag : true,
  		        readyShow : true
  		    }
  		};
  		````
  
  		* 例子2 创建`raw265`类型 播放h265裸流 播放器（包括直播）
  
  		```javascript
  		let config = {
  		    type: "raw265",
  		    player: "glplayer",
  		    width: 960,
  		    height: 540,
  		    accurateSeek : true,
  		    token : token,
  		    extInfo : {
  		        readyShow : true,
  		        rawFps : 30 // 播放帧率
  		    }
  		};
  		````
  
  	* 2）创建播放器
  		* 1. 以`require('./src/h265webjs');`引入为前提
  
  		示例：
  		```javascript
  		let h265webjs = new265webjs(videoURL, config); // 全局方法
  		```
  
  		* 2. 以`import H265webjsModule from './dist/index';`引入为前提 （推荐）
  
  		示例：
  		```javascript
  		let h265webjs = H265webjsModule.createPlayer(videoURL, config);
  		```
  
  		* 3. 如果创建的是`raw265`类型的裸流数据播放 请注意
  
  			* `raw265`类型下，喂字节流播放
  
  			调用函数
  
  			|  函数 | 返回 | 说明 | 
  			|  ----  | ----  | ---- |
  			| append265raw  | bool | 喂裸流字节数据 |
  
  			参数
  
  			| 参数 | 类型 | 默认值 | 必填 | 说明 | 
  			|  ----  | ----  | ---- | ---- | ---- |
  			| chunk  | Uint8Array | - | 是 | 字节裸流数据 |
  
  			例子 - 这里直接将265文件通过网络串流传输
  
  			```javascript
  			let videoURL = "demo/res/raw.h265";
  		    // fetch 265
  		    let fileStart = 0;
  		    let startFetch = false;
  		    let networkInterval = window.setInterval(() => {
  		        if (!startFetch) {
  		            startFetch = true;
  		            fetch(videoURL).then(function(response) {
  		                let pump = function(reader) {
  		                    return reader.read().then(function(result) {
  		                        if (result.done) {
  		                            window.clearInterval(networkInterval);
  		                            return;
  		                        }
  		                        let chunk = result.value;
  		                        // console.log(chunk);
  		                        h265webjs.append265raw(chunk); // 调用喂流
  		                        return pump(reader);
  		                    });
  		                }
  		                return pump(response.body.getReader());
  		            })
  		            .catch(function(error) {
  		                console.log(error);
  		            });
  		        }
  		    }, 1);
  			```

播放器相关事件绑定

1）Seek完成

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

• 示例

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

2）YUV帧数据渲染

可以利用事件回调的YUV做全屏播放

需要调用 setRenderScreen 函数开启才可以收到事件回调数据, 下方1.5 API会说明

• 示例

player.onRender = (width, height, imageBufferY, imageBufferB, imageBufferR) => {
	// todo
};

3）媒体文件加载完成事件

媒体文件当前加载成功，可以进行播放

• 示例

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

4）播放器当前播放PTS（时刻）更新

• 示例

player.onPlayTime = (videoPTS) => {
	// todo
	console.log(videoPTS)
};

5）播放器媒体播放结束事件

• 示例

player.onPlayFinish = () => {
    // finished
};

播放器API能力

1）加载播放器

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

• 示例

player.do();

2）获取当前播放状态

• 示例

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

3）开始播放

• 示例

player.play();

4）暂停播放

• 示例

player.pause();

5）开启/关闭渲染过程中 回调YUV帧数据

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

• 参数

• 示例

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

6）Seek: 跳转到某个时刻

• 参数

• 示例

// Seek到10.01秒
player.seek(10.01);

7）调整音量

调整视频的播放音量

• 参数

• 示例

// 音量开启一半
player.setVoice(0.5);

8）获取媒资数据

获取当前播放的视频文件的信息数据

• 返回值示例

meta:
	audioNone: false // 是否不包含音频轨
	durationMs: 600000 // 时长 毫秒级
	fps: 25 // 帧率
	sampleRate: 44100 // 音频采样率
	size: // 视频分辨率
		height: 720
		width: 1280
	videoCodec: 0
videoType: "vod" // 点播vod 直播live

• 示例

let mediaInfo = player.mediaInfo();

3、其它帮助

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