h265web.js-pro

Appearance

API Docs / API 文档 ​

Create Player Object / 创建播放器对象 ​

O. Directory Structure / 目录结构 ​

js
root -
    ├── index.html
    ├── index.js
    ├── style.css
    ├── hevc_test_moov_set_head_16s.mp4
    ├── output
        ├── h265web.js
        ├── h265web_wasm.js
        ├── h265web_wasm.wasm
        ├── extjs.js
        ├── extwasm.js

PATH => root => http://localhost:8080/

1. Needed by player / 播放器需要的文件： ​

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

2. Import h265web.js in HTML / 在HTML中引入 h265web.js ​

js
<head>
    <meta charset="utf-8" />
    <script src="./{PATH}/h265web.js"></script>
</head>

3. Set SDK files'path / 设置SDK文件路径 ​

  • h265web_wasm.js
  • h265web_wasm.wasm
  • extjs.js
  • extwasm.js
js
// Full url path / 完整URL路径
const wasm_js_uri = window.location.origin + '/`{PATH}`/h265web_wasm.js';
const wasm_wasm_uri =  window.location.origin + '/`{PATH}`/h265web_wasm.wasm';
const ext_src_js_uri = window.location.origin + '/`{PATH}`/extjs.js';
const ext_wasm_js_uri = window.location.origin + '/`{PATH}`/extwasm.js';

4. Create the player's container / 创建播放器容器 ​

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

5. Construct Config / 构造配置 ​

Config Param / 配置参数

EN

ParameterTypeDefaultDescriptionRequired
player_idstring-Player container DIV element's IDYes
wasm_js_uristring-Full URL path to WASM JS fileYes
wasm_wasm_uristring-Full URL path to WASM binaryYes
ext_src_js_uristring-Full URL path to extension library JS fileYes
ext_wasm_js_uristring-Full URL path to extension WASM libraryYes
widthnumber640Player width (supports number or percentage like 640 or "100%")No
heightnumber360Player heightNo
colorstringblackPlayer container background colorNo
auto_playbooleanfalseAuto play after successful loadNo
readframe_multi_timesnumber-1AV demuxer every feed buffer size scale timesNo
corestring-Decoder core priority (options: mse_hevc/wasm_hevc/webcodec_hevc)No
ignore_audiobooleanfalseWhether to ignore audio track (default: false)No

ZH

参数类型默认值描述必填
player_idstring-播放器容器 DIV 元素的 ID是
wasm_js_uristring-WASM JS 文件的完整 URL 路径是
wasm_wasm_uristring-WASM 二进制文件的完整 URL 路径是
ext_src_js_uristring-扩展库 JS 文件的完整 URL 路径是
ext_wasm_js_uristring-扩展 WASM 库的完整 URL 路径是
widthnumber640播放器宽度（支持数字或百分比格式，如 640 或 "100%"）否
heightnumber360播放器高度否
colorstringblack播放器容器的背景颜色否
auto_playbooleanfalse加载成功后自动播放否
readframe_multi_timesnumber-1AV 解复用器每次读取缓冲区大小的缩放倍数否
corestring-优先解码选择（可选值：mse_hevc/wasm_hevc/webcodec_hevc）否
ignore_audiobooleanfalse是否忽略音频轨道（默认不忽略）否

Config Create Example / 创建配置示例

js
const player_config ={
    player_id: "canvas111", // player container's ID
    wasm_js_uri: wasm_js_uri,// Full url path / 完整URL路径
    wasm_wasm_uri: wasm_wasm_uri, // Full url path / 完整URL路径
    ext_src_js_uri: ext_src_js_uri, // Full url path / 完整URL路径
    ext_wasm_js_uri: ext_wasm_js_uri, // Full url path / 完整URL路径
    width: 640, // player container's width (Number or Number Percent => 640 or 100%)
    height: 480,
    color: "antiquewhite", // player container's background color
    auto_play: true, // need to autplay after load successed
    readframe_multi_times: -1, // av demuxer every feed buffer scale times, default is -1
    // core: 'mse_hevc',
    // core: 'wasm_hevc',
    // core: 'webcodec_hevc', // Top priority of player core
    ignore_audio: false // need to ignore audio, default is false
};

6. Create Player / 创建播放器 ​

js
// 创建播放器方法
var ylplayer = H265webjsPlayer();
ylplayer.build(player_config);

API Usage / API 使用 ​

build / 构建播放器 ​

ParameterTypeRequiredDescription
player_configobjectYesPlayer configuration object / 播放器配置对象
js
ylplayer.build(player_config);

release / 释放播放器 ​

ParameterTypeRequiredDescription
----
js
ylplayer.release();

load_media / 加载媒体文件 ​

ParameterTypeRequiredDescription
media_urlstringYesFull URL of media file / 媒体文件完整URL路径
js
// must be full url path / 必须是完整的URL路径
// const MEDIA_URL = "http://xxxx.com/xxx.mp4";
const MEDIA_URL = "http://localhost:8080/hevc_test_moov_set_head_16s.mp4";
ylplayer.load_media(MEDIA_URL);

play / 播放 ​

ParameterTypeRequiredDescription
----
js
ylplayer.play();

pause / 暂停 ​

ParameterTypeRequiredDescription
----
js
ylplayer.pause();

seek / 跳转 ​

ParameterTypeRequiredDescription
timenumberYesSeek time in seconds / 跳转时间(秒)
js
ylplayer.seek(10);

set_playback_rate / 设置播放速度 ​

ParameterTypeRequiredDescription
playback_ratenumberYesPlayback speed (1.0 = normal) / 播放速度值
js
ylplayer.set_playback_rate(2);

set_volume / 设置音量 ​

ParameterTypeRequiredDescription
volumenumberYesVolume value (0.0 = mute, 1.0 = max) / 音量值（0.0=静音，1.0=最大）
js
ylplayer.set_volume(0.5);

set_mute / 设置静音 ​

ParameterTypeRequiredDescription
mutebooleanYesMute status / 静音状态（true=静音）
js
ylplayer.set_mute(true);

change_media / 切换媒体文件 ​

ParameterTypeRequiredDescription
media_urlstringYesFull URL of media file / 媒体文件完整URL路径
js
ylplayer.change_media(MEDIA_URL);

screenshot / 截图 ​

ParameterTypeRequiredDescription
img_idstringYesID of img element / img元素的ID

html: create img element / 创建图片DOM

html
<img id="screenshot" style="width:400px;height:340px;background-color: #e9e9e9;">

javascript: call screenshot api / 调用截图API

js
ylplayer.screenshot("screenshot");

next_frame / 下一帧 ​

ParameterTypeRequiredDescription
----

javascript: call next_frame api / 调用下一帧API

js
ylplayer.next_frame();

resize / 调整大小 ​

ParameterTypeRequiredDescription
widthnumberYesWidth of player container / 播放器容器宽度
heightnumberYesHeight of player container / 播放器容器高度

javascript: call resize api / 调用播放器调整大小API

js
ylplayer.resize(640, 480);

fullScreen / 全屏 ​

ParameterTypeRequiredDescription
----

javascript: call fullScreen api / 调用全屏API

js
ylplayer.fullScreen();

closeFullScreen / 退出全屏 ​

ParameterTypeRequiredDescription
----

javascript: call closeFullScreen api / 调用退出全屏API

js
ylplayer.closeFullScreen();

Event(Callback) / 事件(回调) ​

on_ready_show_done_callback / 首帧就绪可以播放 ​

Able to play after first frame callback / 首帧就绪可以播放

ParameterTypeRequiredDescription
----
html
<button id="play_btn" onclick="play()" disabled>PLAY</button>
<button id="pause_btn" onclick="pause()" disabled>PAUSE</button>
<button id="voice_btn" onclick="set_voice()" disabled>VOLUME</button>
javascript
ylplayer.on_ready_show_done_callback = function () {
    console.log("on_ready_show_done_callback");
    // you can click play button
    document.getElementById("play_btn").disabled = false;
    document.getElementById("pause_btn").disabled = false;
    document.getElementById("voice_btn").disabled = false;
};

video_probe_callback / 媒体分析 ​

ParameterTypeDescription
mediaInfoobjectMedia metadata object / 媒体元数据对象
javascript
ylplayer.on_video_probe_callback = function (mediaInfo) {
    console.log("on_video_probe_callback", mediaInfo);
};

on_play_time / 播放时间 ​

ParameterTypeDescription
ptsnumberCurrent playback time / 当前播放时间
javascript
ylplayer.on_play_time_callback = function (pts) {
    console.log("on_play_time_callback", pts);
};

on_seek_start_callback / 跳转开始 ​

ParameterTypeDescription
seekTargetnumberTarget time (seconds) / 目标时间（秒）
javascript
ylplayer.on_seek_start_callback = function (seekTarget) {
    console.log("on_seek_start_callback", seekTarget);
};

on_seek_done_callback / 跳转完成 ​

ParameterTypeDescription
seekTargetnumberActual seek time / 实际跳转时间
javascript
ylplayer.on_seek_done_callback = function (seekTarget) {
    console.log("on_seek_done_callback", seekTarget);
};

on_cache_process_callback / 缓存进度 ​

ParameterTypeDescription
timestampnumberCurrent cache timestamp / 当前缓存时间戳
javascript
ylplayer.on_cache_process_callback = function (timestamp) {
    console.log("on_cache_process_callback", timestamp);
};

on_load_caching_callback / 缓存加载中 ​

ParameterTypeRequiredDescription
----
javascript
ylplayer.on_load_caching_callback = function () {
    console.log("on_load_caching_callback");
};

on_finish_cache_callback / 缓存完成 ​

ParameterTypeDescription
dataobjectCache status object / 缓存状态对象
javascript
ylplayer.on_finish_cache_callback = function (data) {
    console.log("on_finish_cache_callback", data);
};

on_play_finished / 播放结束 ​

ParameterTypeRequiredDescription
----
javascript
ylplayer.on_play_finished_callback = function () {
    console.log("on_play_finished_callback");
};

video_nalu_callback / NALU单元 ​

only webcodec/wasm / 仅webcodec/wasm

ParameterTypeDescription
ptsnumberPresentation timestamp / 显示时间戳
dtsnumberDecoding timestamp / 解码时间戳
javascript
ylplayer.on_video_nalu_callback = function (pts, dts, data) {
    console.log("on_video_nalu_callback", pts, dts, data);
};

video_frame_callback / 视频帧 ​

only webcodec/wasm / 仅webcodec/wasm

ParameterTypeDescription
ptsnumberFrame timestamp / 帧时间戳
wnumberFrame width / 帧宽度
hnumberFrame height / 帧高度
cache_sizenumberCurrent cache size / 当前缓存大小
javascript
ylplayer.on_video_frame_callback = function (pts, w, h, cache_size) {
    console.log("on_video_frame_callback", pts, w, h, cache_size);
};

audio_frame_callback / 音频帧处理 ​

only webcodec/wasm / 仅webcodec/wasm

ParameterTypeDescription
ptsnumberAudio timestamp / 音频时间戳
cache_sizenumberCurrent cache size / 当前缓存大小
javascript
ylplayer.on_audio_frame_callback = function (pts, cache_size) {
    console.log("on_audio_frame_callback", pts, cache_size);
};

video_render_callback / 视频渲染 ​

only webcodec/wasm / 仅webcodec/wasm

ParameterTypeDescription
ptsnumberRendering timestamp / 渲染时间戳
wnumberRender width / 渲染宽度
hnumberRender height / 渲染高度
javascript
ylplayer.on_video_render_callback = function (pts, w, h) {
    console.log("on_video_render_callback", pts, w, h);
};

audio_render_callback / 音频渲染 ​

only webcodec/wasm / 仅webcodec/wasm

ParameterTypeDescription
ptsnumberAudio rendering timestamp / 音频渲染时间戳
javascript
ylplayer.on_audio_render_callback = function (pts) {
    console.log("on_audio_render_callback", pts);
};