h265web.js-pro

Appearance

h265web.js-pro GET STARTED / 快速开始 ​

Install / 安装 ​

Trial version / 试用版本 ​

The trial version only supports 3 minates after loading the media for play. / 试用版本仅支持播放媒体3分钟体验.

h265web.js-pro Git clone from https://github.com/numberwolf/h265web.js/tree/h265web.js-pro

h265web.js Open Source version you should visit here https://github.com/numberwolf/h265web.js

Directly Import SDK / 直接引入SDK ​

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';

Create Player / 创建播放器 ​

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

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

2. Construct Config / 构造配置 ​

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: "100%", // player container's width (Number or Number Percent => 640 or 100%)
    height: isMobileDevice() ? "100%" : 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
};

3. Create Player / 创建播放器 ​

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

4. Bind Core Callback / 绑定核心回调 ​

Most Important Event / 最关键的回调

js
// ！First frame loaded, can be played / 首帧加载完成, 才可以播放 ！
ylplayer.on_ready_show_done_callback = function () {
    // appendLog(5, "on_ready_show_done_callback");
};
// Video probe finished status / 视频分析完成状态
ylplayer.video_probe_callback = function (mediaInfo) {
    // appendLog(5, JSON.stringify(mediaInfo));
    console.log("===============>", mediaInfo);
};

Others Core Callback / 其他核心回调

js
// Cache Progress of Decode media / 缓存解码进度回调
ylplayer.on_cache_process_callback = function (timestamp) {
    // appendLog(5, "on_cache_process_callback " + timestamp);
};
// Doing cache / 正在缓存中
ylplayer.on_load_caching_callback = function () {
    // appendLog(5, "on_load_caching_callback " + v_cache_size);
};
// Done cache / 缓存完成
ylplayer.on_finish_cache_callback = function (data) {
    // appendLog(5, "on_finish_cache_callback " + data.store_length);
};
// Play finished status / 播放完成状态
ylplayer.on_play_finished = function () {
    // appendLog(5, "on_play_finished");
};
// Player progress / 当前播放进度
ylplayer.on_play_time = function(pts) {
    const float_pts = pts; // example 1.23 (second)
    // document.getElementById("time_info").innerHTML = `play_pts: ${float_pts}`;
}
// seek start / 跳转开始
ylplayer.on_seek_start_callback = function (seekTarget) {
    // appendLog(5, "on_seek_start_callback seekTarget: " + seekTarget);
}
// seek end / 跳转结束
ylplayer.on_seek_done_callback = function (seekTarget) {
    // appendLog(5, "on_seek_done_callback seekTarget: " + seekTarget);
}

Start Play / 开始播放 ​

1. Load Media / 加载视频 ​

js
// must be full url path / 必须是完整的URL路径
const MEDIA_URL = "http://xxxx.com/xxx.mp4";
ylplayer.load_media("`{MEDIA_URL}`");

2. Play Operations / 播放操作 ​

js
// after ylplayer.on_ready_show_done_callback, can play
// 在 ylplayer.on_ready_show_done_callback 首帧加载之后, 可以进行播放
ylplayer.play();