h265web.js PRO
EN中文

主题

h265web.js PRO 快速开始 ​

h265web.js PRO 已经是当前正式发布主线，并且现在免费使用。

这一页只保留最小、最实用的播放器创建流程，方便最快跑通第一个页面。

1. 需要哪些文件 ​

浏览器运行时通常需要下面这些文件：

  • h265web.js
  • h265web_wasm.js
  • h265web_wasm.wasm
  • extjs.js
  • extwasm.js

一个常见目录结构如下：

text
root/
├── index.html
├── index.js
├── resource/
│   └── demo.mp4
└── output/
    ├── h265web.js
    ├── h265web_wasm.js
    ├── h265web_wasm.wasm
    ├── extjs.js
    └── extwasm.js

2. 引入 SDK ​

html
<head>
  <meta charset="utf-8" />
  <script src="./output/h265web.js"></script>
</head>

3. 创建播放器容器 ​

html
<div id="canvas111"></div>

4. 设置资源路径 ​

SDK 资源路径现在支持三种写法：

  • 完整 URL：https://cdn.example.com/output/h265web_wasm.js
  • 站点绝对路径：/output/h265web_wasm.js
  • 相对路径：./output/h265web_wasm.js

如果希望四个 SDK 资源都从同一个目录解析，可以使用 base_url。

js
const playerConfig = {
  player_id: 'canvas111',
  base_url: './output/',
  wasm_js_uri: 'h265web_wasm.js',
  wasm_wasm_uri: 'h265web_wasm.wasm',
  ext_src_js_uri: 'extjs.js',
  ext_wasm_js_uri: 'extwasm.js',
  width: '100%',
  height: 480,
  color: '#101318',
  auto_play: true,
  readframe_multi_times: -1,
  ignore_audio: false
};

5. 创建播放器 ​

js
const ylplayer = H265webjsPlayer();
ylplayer.build(playerConfig);

6. 最小必需回调 ​

建议最先接这两个回调：

js
ylplayer.on_ready_show_done_callback = function () {
  console.log('on_ready_show_done_callback');
};

ylplayer.video_probe_callback = function (mediaInfo) {
  console.log('video_probe_callback', mediaInfo);
};

其他常用回调 ​

如果你需要进度、缓存状态或者 seek 状态，可以继续接这些：

js
ylplayer.on_cache_process_callback = function (timestamp) {
  console.log('on_cache_process_callback', timestamp);
};

ylplayer.on_load_caching_callback = function () {
  console.log('on_load_caching_callback');
};

ylplayer.on_finish_cache_callback = function (data) {
  console.log('on_finish_cache_callback', data);
};

ylplayer.on_play_finished = function () {
  console.log('on_play_finished');
};

ylplayer.on_play_time = function (pts) {
  console.log('on_play_time', pts);
};

ylplayer.on_seek_start_callback = function (seekTarget) {
  console.log('on_seek_start_callback', seekTarget);
};

ylplayer.on_seek_done_callback = function (seekTarget) {
  console.log('on_seek_done_callback', seekTarget);
};

7. 加载媒体 ​

媒体地址同样支持三种写法：

  • 完整 URL：https://example.com/media/demo.mp4
  • 站点绝对路径：/resource/demo.mp4
  • 相对路径：./resource/demo.mp4
js
const mediaUrl = './resource/demo.mp4';
ylplayer.load_media(mediaUrl);

8. 开始播放 ​

如果 auto_play 为 false，建议在首帧就绪后再调用 play()。

js
ylplayer.on_ready_show_done_callback = function () {
  ylplayer.play();
};

9. 最小可运行示例 ​

js
const ylplayer = H265webjsPlayer();

ylplayer.on_ready_show_done_callback = function () {
  console.log('first frame ready');
};

ylplayer.video_probe_callback = function (mediaInfo) {
  console.log('mediaInfo', mediaInfo);
};

ylplayer.build({
  player_id: 'canvas111',
  base_url: './output/',
  wasm_js_uri: 'h265web_wasm.js',
  wasm_wasm_uri: 'h265web_wasm.wasm',
  ext_src_js_uri: 'extjs.js',
  ext_wasm_js_uri: 'extwasm.js',
  width: '100%',
  height: 480,
  auto_play: true,
  ignore_audio: false
});

ylplayer.load_media('./resource/demo.mp4');