VR360 视频播放示例

这个例子播放一个可以用鼠标拖动、触屏转动视角的 360° 视频。准备真正的全景片源：单目等距柱状视频（简称 ERP），常见画面是 2:1。erp360 是播放器开启 VR360 观看方式的配置值；普通平面视频不会因设置它而变成全景。

当前公开 SDK 已包含 set_projection() 等 VR360 API。若旧缓存版本没有这些接口，请更新 SDK。完整参数见 VR360 视频播放 API。

1. 放好文件

把 SDK 文件和自己的 360° MP4 放到下列位置，然后用 HTTP 服务打开页面，不要双击 file:// 文件。想先用已知片源验收，可从 GitHub CDN 下载自生成的 VR360 H.264 + AAC 测试视频，保存为 media/vr360.mp4。其他格式和 FFmpeg 直播推流方法见测试素材与 FFmpeg 推流。

text

demo/
├── index.html
├── media/vr360.mp4                 ← 换成你的单目 360° 视频
└── output/
    ├── h265web.js
    ├── h265web_wasm.js
    └── h265web_wasm.wasm

2. 复制 `index.html`

html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>VR360 播放示例</title>
  <!-- SDK JS 与下面两个 WASM 文件必须来自同一次构建。 -->
  <script src="./output/h265web.js"></script>
</head>
<body>
  <div id="player"></div>
  <button id="play" disabled>播放</button>
  <button id="pause">暂停</button>
  <button id="left">向左看</button>
  <button id="right">向右看</button>
  <button id="flat">普通画面</button>
  <button id="vr">VR360 画面</button>
  <button id="sound">打开声音</button>
  <p id="status">准备加载…</p>

  <script>
    const status = document.getElementById('status');
    const playButton = document.getElementById('play');
    const player = H265webjsPlayer();

    // 先绑定回调，再 build()、load_media()。ready 只表示有首帧，不等于正在播放。
    player.on_ready_show_done_callback = () => {
      playButton.disabled = false;
      status.textContent = '首帧已就绪，请点击播放；片源第 0 帧可能是黑色。';
    };
    player.on_error_callback = (error) => {
      if (error.domain === 'vr' && error.fatal === false) {
        // VR360 显示失败时可继续普通平面播放，不要因此重建解码器。
        status.textContent = `VR360 未显示，已尝试平面播放：${error.code}`;
        return;
      }
      status.textContent = `播放错误：${error.message || error.code}`;
    };

    // 这里的 erp360 是 VR360 播放开关，不会转换视频文件。
    const ok = player.build({
      player_id: 'player',
      base_url: './output/',
      wasm_js_uri: 'h265web_wasm.js',
      wasm_wasm_uri: 'h265web_wasm.wasm',
      width: '100%', height: 480,
      auto_play: false, ignore_audio: false,
      projection: 'erp360',
      vr: {yaw: 0, pitch: 0, fov: 75, mouse_control: true, touch_control: true}
    });
    if (ok) {
      player.set_voice(0); // 初始静音，但保留音频链，点击“打开声音”可恢复。
      player.load_media('./media/vr360.mp4'); // 改成你自己的 360° 视频 URL。
    } else {
      status.textContent = '播放器创建失败：请检查 SDK 文件路径和控制台。';
    }

    playButton.onclick = () => player.play();
    document.getElementById('pause').onclick = () => player.pause();
    document.getElementById('left').onclick = () => player.rotate_vr_view({yaw: -30});
    document.getElementById('right').onclick = () => player.rotate_vr_view({yaw: 30});
    document.getElementById('flat').onclick = () => player.set_projection('flat');
    document.getElementById('vr').onclick = () => player.set_projection('erp360');
    document.getElementById('sound').onclick = () => player.set_voice(1);
    window.addEventListener('beforeunload', () => player.release());
  </script>
</body>
</html>

3. 打开与排查

在 demo/ 目录运行 python3 -m http.server 8080，访问 http://localhost:8080/。如果 Autoplay 关闭，等首帧 ready 后还要点“播放”；其他片源第 0 帧可能本来就是黑色，不等于加载失败。跨域视频需要媒体服务器允许 CORS 才能用于 VR360；发生 VR_SOURCE_CORS 时请先看 QA WIKI。

验收 VR360 直播时，不用换另一套播放器：保持 projection: 'erp360'，把 load_media('./media/vr360.mp4') 改成正在推送 ERP 画面的直播地址，例如 http://127.0.0.1/live/vr360.live.flv；直播源必须真的是 360° 全景画面。推流方法见直播播放示例，WebRTC 地址见 WebRTC 播放示例。

VR360 视频播放示例 ​

1. 放好文件 ​

2. 复制 index.html ​

3. 打开与排查 ​

VR360 视频播放示例

1. 放好文件

2. 复制 `index.html`

3. 打开与排查