API 文档
这一页是当前 h265web.js PRO 浏览器 SDK 的精简参考。
路径规则
当前 SDK 对资源路径和媒体路径都支持以下写法:
- 完整 URL:
https://example.com/output/h265web_wasm.js - 站点绝对路径:
/output/h265web_wasm.js - 相对路径:
./output/h265web_wasm.js
如果你希望四个 SDK 资源统一从同一个目录解析,可以使用 base_url。
构建流程
推荐的公开接入方式:
- 创建播放器对象。
- 绑定需要的回调。
- 调用
build(config)。 - 调用
load_media(mediaUrl)。
js
const ylplayer = H265webjsPlayer();
ylplayer.on_ready_show_done_callback = function () {
console.log('ready');
};
ylplayer.video_probe_callback = function (mediaInfo) {
console.log('probe', 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');build(config)
配置字段
| 参数 | 类型 | 必需 | 说明 |
|---|---|---|---|
player_id | string | 是 | 播放器容器元素 id |
wasm_js_uri | string | 是 | h265web_wasm.js 的资源路径 |
wasm_wasm_uri | string | 是 | h265web_wasm.wasm 的资源路径 |
ext_src_js_uri | string | 否 | extjs.js 的资源路径 |
ext_wasm_js_uri | string | 否 | extwasm.js 的资源路径 |
base_url | string | 否 | SDK 资源统一基准路径 |
width | number | string | 否 | 播放器宽度 |
height | number | string | 否 | 播放器高度 |
color | string | 否 | 播放器背景色 |
auto_play | boolean | 否 | 媒体就绪后自动播放 |
readframe_multi_times | number | 否 | demux 读取倍率 |
core | string | 否 | 显式指定内核:mse_hevc、wasm_hevc、webcodec_hevc |
ignore_audio | boolean | 否 | 是否忽略音频 |
media_uri | string | 否 | 可选媒体地址;公开示例仍推荐 build() 后再 load_media() |
核心方法
release()
js
ylplayer.release();load_media(mediaUrl)
js
ylplayer.load_media('./resource/hevc_test_moov_set_head_16s.mp4');change_media(mediaUrl)
js
ylplayer.change_media('/resource/another-demo.mp4');play()
js
ylplayer.play();pause()
js
ylplayer.pause();seek(seconds)
js
ylplayer.seek(10);set_playback_rate(rate)
js
ylplayer.set_playback_rate(2.0);set_voice(volume)
js
ylplayer.set_voice(0.5);set_mute()
js
ylplayer.set_mute();screenshot(imgId)
html
<img id="screenshot" style="width:400px;height:340px;background:#e9e9e9;" />js
ylplayer.screenshot('screenshot');next_frame()
js
ylplayer.next_frame();resize(width, height)
js
ylplayer.resize(640, 480);fullScreen()
js
ylplayer.fullScreen();closeFullScreen()
js
ylplayer.closeFullScreen();必需回调
on_ready_show_done_callback
js
ylplayer.on_ready_show_done_callback = function () {
console.log('on_ready_show_done_callback');
};video_probe_callback(mediaInfo)
js
ylplayer.video_probe_callback = function (mediaInfo) {
console.log('video_probe_callback', mediaInfo);
};播放与跳转回调
on_play_time(pts)
js
ylplayer.on_play_time = function (pts) {
console.log('on_play_time', pts);
};on_play_finished()
js
ylplayer.on_play_finished = function () {
console.log('on_play_finished');
};on_seek_start_callback(seekTarget)
js
ylplayer.on_seek_start_callback = function (seekTarget) {
console.log('on_seek_start_callback', seekTarget);
};on_seek_done_callback(seekTarget)
js
ylplayer.on_seek_done_callback = function (seekTarget) {
console.log('on_seek_done_callback', seekTarget);
};缓存相关回调
on_cache_process_callback(timestamp)
js
ylplayer.on_cache_process_callback = function (timestamp) {
console.log('on_cache_process_callback', timestamp);
};on_load_caching_callback()
js
ylplayer.on_load_caching_callback = function () {
console.log('on_load_caching_callback');
};on_finish_cache_callback(data)
js
ylplayer.on_finish_cache_callback = function (data) {
console.log('on_finish_cache_callback', data);
};