h265web.js PRO
EN中文

主题

简单示例 ​

这一页提供一套可以直接复制的本地示例结构。

1. 示例目录 ​

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

2. 启动任意静态 Web 服务 ​

这个示例只需要一个普通静态 Web 服务：

bash
python3 -m http.server 8080

3. index.html ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>h265web.js PRO Demo</title>
    <script src="./output/h265web.js"></script>
  </head>
  <body>
    <div id="canvas111"></div>

    <div class="control-container">
      <button id="play_btn" onclick="play()" disabled>PLAY</button>
      <button id="pause_btn" onclick="pause()" disabled>PAUSE</button>
      <button id="voice_btn" onclick="setVoice()" disabled>VOLUME</button>
    </div>

    <div class="mode-container">
      <button onclick="buildPlayer('webcodec_hevc')">WEBCODEC</button>
      <button onclick="buildPlayer('wasm_hevc')">SIMD</button>
      <button onclick="buildPlayer('mse_hevc')">MSE</button>
      <button onclick="buildPlayer()">AUTO</button>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

4. index.js ​

js
let ylplayer = null;
const mediaUrl = './resource/hevc_test_moov_set_head_16s.mp4';

function createPlayer(core = null) {
  if (ylplayer) {
    ylplayer.release();
    ylplayer = null;
  }

  ylplayer = H265webjsPlayer();

  ylplayer.on_ready_show_done_callback = function () {
    document.getElementById('play_btn').disabled = false;
    document.getElementById('pause_btn').disabled = false;
    document.getElementById('voice_btn').disabled = false;
  };

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

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

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

  if (core) {
    playerConfig.core = core;
  }

  ylplayer.build(playerConfig);
}

function buildPlayer(core = null) {
  createPlayer(core);
  ylplayer.load_media(mediaUrl);
}

function play() {
  ylplayer && ylplayer.play();
}

function pause() {
  ylplayer && ylplayer.pause();
}

function setVoice() {
  ylplayer && ylplayer.set_voice(1.0);
}

window.onload = function () {
  buildPlayer();
};

5. 路径说明 ​

当前 SDK 对资源路径和媒体路径都支持以下写法：

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

如果你使用 base_url，四个 SDK 资源文件可以直接保留短文件名。

6. 推荐流程 ​

  1. 先构建播放器。
  2. 绑定最小回调。
  3. 调用 load_media()。
  4. 让 auto_play 自动启动，或者在 on_ready_show_done_callback 后再手动 play()。

7. WebRTC 推流与拉流演示 ​

先把 H.264 + AAC 流推送到 ZLMediaKit：

bash
ffmpeg -hide_banner -stream_loop -1 -re \
  -i /path/to/input.flv \
  -vf scale=640:360,format=yuv420p \
  -c:v libx264 -preset veryfast -tune zerolatency \
  -profile:v baseline -level 3.1 -bf 0 \
  -g 25 -keyint_min 25 -sc_threshold 0 \
  -c:a aac -profile:a aac_low -ar 44100 -ac 2 -b:a 128k \
  -f flv rtmp://127.0.0.1/live/test

继续使用原有播放器生命周期，输入标准 WHEP 拉流地址：

js
const rtcPlayer = H265webjsPlayer();

rtcPlayer.on_ready_show_done_callback = function () {
  rtcPlayer.play();
};

rtcPlayer.on_play_time = function (seconds) {
  console.log('WebRTC 播放时间', seconds);
};

rtcPlayer.on_error_callback = function (error) {
  console.error('WebRTC 播放错误', error);
};

rtcPlayer.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: false,
  ignore_audio: false
});

rtcPlayer.load_media('http://127.0.0.1/index/api/whep?app=live&stream=test');

不设置 core 时由 URL 自动选择 WebRTC；只有调用方明确要求强制 WebRTC 时才增加 core: 'webrtc'。判断播放流畅度前，请先按快速开始把 ZLMediaKit 配置为 modify_stamp=1。

仓库还提供浏览器 WHIP 推流演示 webrtc-publish.html 和 WHEP 拉流演示 webrtc-play.html。WHIP 用于推流，WHEP 用于拉流播放。