下面给你一份可直接执行、覆盖性强的实战指南：
目标是 在 HTML5 页面兼容播放 HEVC（H.265）文件，并且 支持本地绝对路径 / 本地文件访问 的可行方案、优缺点、代码示例与常见问题的解决方式。本文把“可用性/兼容性”放在首位，并给出若兼容性不足时的降级方案（转码 / 本地服务 / 客户端壳）。

结论先行（快速摘要）

  1. HEVC 在浏览器上的原生支持并不一致：Safari（macOS / iOS）对 HEVC 支持最好；Chromium 系列（Chrome/Edge）只能在底层平台／硬件支持（以及系统解码器可用）时播放；Firefox 支持非常有限。若要最广泛兼容，仍需提供 H.264 / AV1 的降级版本。 (MDN Web Docs)
  2. 浏览器不能从 http(s) 页面直接读取任意本地绝对路径（file://）下的文件，安全策略阻止跨协议访问；要播放本地文件有三个可行路径：用户选文件（<input type="file"> / 拖放 / File System Access API）、本地 HTTP 服务、或者使用桌面壳（Electron 等）。 (Mozilla Discourse)
  3. 最佳实用组合：在 web 页面放 <video>，提供多个 <source>（HEVC 优先、H.264 备用）；如果是本地播放，推荐让用户选择文件或先启动本地静态服务器（例如 python -m http.server）再用普通 URL 访问。若要在受控环境（公司内网／自家机器）长期使用，可用 Electron 打包成本地程序访问任意本地绝对路径。 (Streaming Media)

详细说明与操作步骤（一步步可复制）

1) 视频文件准备（容器与 codec）

  • 推荐封装：MP4 / MOV 容器里用 HEVC（H.265）编码最常见。浏览器可能认 hev1 或 hvc1 品牌。
  • 在 <source> 的 type 字段可以写：
    type="video/mp4; codecs=\"hvc1\"" 或 type="video/mp4; codecs=\"hev1\""（实际品牌根据你的编码器输出）。这能帮助浏览器先判断是否能解码。 (Webmasters Stack Exchange)

示例 HTML：

&lt;video controls playsinline>
  &lt;!-- HEVC 优先 -->
  &lt;source src="video-hevc.mp4" type='video/mp4; codecs="hvc1"'/>
  &lt;!-- 兼容回退 -->
  &lt;source src="video-avc.mp4"  type='video/mp4; codecs="avc1.42E01E"'/>
  您的浏览器不支持此视频格式。
&lt;/video>

2) 浏览器兼容性要点（为什么有差异）

  • Safari（macOS / iOS）：对 HEVC 支持最成熟（系统级硬解），在 Safari 上通常能直接播放 HEVC mp4。
  • Chrome / Edge（Chromium）：只有在操作系统/硬件提供 HEVC 解码器时才可播放（Chrome 不自带完全的 HEVC 解码器）。在 Windows 上有时需要额外的 HEVC 扩展（Microsoft Store）。Chrome 在平台支持下可以播放清除（非 DRM）HEVC，但对 DRM（Widevine + HEVC）的支持有限。 (Streaming Media)
  • Firefox：HEVC 支持非常受限，通常不主动支持。 (MDN Web Docs)

因此不要假设所有用户都能直接播放 HEVC——必须提供降级方案。

3) 如果需要保证“本地绝对路径”播放（用户场景常见解决方案）

浏览器安全模型限制跨协议或跨域读取任意本地路径（从 https 页面无法直接 <video src="file:///C:/..."> 访问），可选择以下几种做法：

A. 最简单且推荐（用户选择文件）

让用户通过 <input type="file"> 或拖拽选择本地文件，浏览器会生成 File 对象并允许播放（无需上传）：

&lt;input id="file" type="file" accept="video/*">
&lt;video id="player" controls>&lt;/video>

&lt;script>
const input = document.getElementById('file');
const player = document.getElementById('player');
input.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  player.src = URL.createObjectURL(file);
  player.play();
});
&lt;/script>

优点：安全、跨平台、用户体验好；缺点：无法通过“绝对路径 URL”直接指定文件（需要用户交互）。 (Stack Overflow)

B. 用本地静态 HTTP 服务（适合开发或内网）

把本地目录以 HTTP 服务起来，然后用 http://localhost:xxxx/your/path.mp4 访问。常见命令：

  • Python3（快速起服务）：
# 指定目录为当前目录
python -m http.server 8000
# 然后浏览器访问 http://localhost:8000/video-hevc.mp4
  • 或用 http-server（Node）：
npm i -g http-server
http-server . -p 8000

优点：像普通网页一样访问绝对路径，支持跨页面链接；缺点：需要用户在本机启动服务或由管理员预装。 浏览器会将其当作常规 http 资源来解码和播放。 (Android Enthusiasts Stack Exchange)

C. 使用桌面应用（Electron / NW.js）或浏览器扩展

  • Electron 可访问本地文件系统并在内嵌 Chromium 中播放任意本地路径；适合你需要做成桌面工具或公司内部播放器的场景。优点：完全控制；缺点：需要打包、维护体积较大。
  • 浏览器扩展通常无法绕过浏览器对 file:// 的保护（且用户需安装扩展），不推荐用于普通用户场景。

D. File System Access API（原名 Native File System API）

  • 现代 Chrome/Edge 支持该 API，可让用户授予网站读写本地文件的权限（需 HTTPS 或 localhost），支持直接从文件系统读取并以流方式播放（但兼容性不是普遍，Safari/Firefox 支持有限）。如果目标用户使用 Chromium 并愿意授权，这是体验很好的方案。
  • 注意：仍需用户授权且仅在安全上下文可用。 (MDN Web Docs)

4) HEVC 与 DRM 的注意

  • 即便浏览器在平台上支持 HEVC，HEVC + Widevine（常见的 DRM）支持有很多限制：很多浏览器并不支持用 Widevine 解码 HEVC（或仅在特定安全级别/平台上支持）。如果你的内容需要 DRM，要先确认目标平台与浏览器的 DRM + HEVC 路径。 (Stack Overflow)

5) 转码（当兼容性不够时）

最稳妥的方法是提供多份编码：HEVC（节省空间）+ H.264（兼容性最广）+ （可选）AV1（压缩好、未来向）。使用 ffmpeg 转码示例：

  • 转 HEVC -> H.264（兼容性更广）：
ffmpeg -i input-hevc.mp4 -c:v libx264 -crf 18 -preset slow -c:a copy output-avc.mp4
  • 或用 libx265 编码 HEVC：
ffmpeg -i input.mp4 -c:v libx265 -crf 23 -c:a copy output-hevc.mp4

（-crf 数值越小质量越高，体积越大；-preset 控制编码速度/效率）。 (Super User)

6) 检测浏览器能否播放 HEVC（运行时代码）

可以用 canPlayType 来判断浏览器是否能播放指定容器/codec：

const v = document.createElement('video');
if (v.canPlayType('video/mp4; codecs="hvc1"')) {
  console.log('浏览器可能支持 HEVC');
} else {
  console.log('不支持 HEVC，使用回退');
}

注意 canPlayType 返回 "probably" | "maybe" | ""，并不是 100% 准确，但在实践中常用作首轮判断。

推荐的生产环境策略（一套可直接上线的策略）

  1. 提供多码流：HEVC（video-hevc.mp4）+ AVC/H.264（video-avc.mp4）。HTML 中列出 HEVC 在前。
  2. 运行时检测：页面加载时用 canPlayType 决定是否加载 HEVC。
  3. 本地播放：给出两种入口：
    • “打开本地文件”按钮（<input type=file>），用户选择即可播放（适合普通用户）；
    • 或告知“若需直接用绝对路径，请先运行本地 HTTP 服务，示例命令给出（python/node）”，并说明如何把文件放到服务目录下。
  4. 桌面版本：若你做的是本地播放器或内部发布，使用 Electron 打包可以直接访问任意本地路径并嵌入 <video> 播放 HEVC。
  5. 若内容需要 DRM：先验证目标组合（浏览器 + OS + DRM）的支持情况；如果不支持 HEVC+Widevine，请考虑使用 AVC 或使用不同 DRM 策略。 (Bitmovin)

常见问题（FAQ）

Q：能不能直接把 file:///C:/video.mp4 写在 <video src=""> 中让任意 http 页面加载？
A：不能。出于安全，http/https 页面不能加载 file:// 资源；只有当页面本身是 file://（即本地打开 HTML 文件）时，浏览器才允许 file: 链接。更稳妥的方法是让用户用文件选择或开启本地 http 服务。 (Mozilla Discourse)

Q：为什么 Chrome 在我机器上能播放 HEVC，但别人机器不能？
A：Chrome 对 HEVC 依赖操作系统的解码器与硬件支持——不同机器/平台差异大。建议提供回退到 H.264。 (Streaming Media)

Q：在 Safari 上播放 HEVC 怎么保证多声道 / HDR 正常？
A：Safari 在 macOS/iOS 上依赖系统解码器，HEVC 的 HDR/色深/音轨支持通常跟系统密切相关。测试真实设备是必要步骤。 (MDN Web Docs)

参考（关键出处）

  • caniuse — HEVC support summary（兼容性总览）。(Can I Use)
  • MDN — Web video codecs guide（浏览器对不同 codec 的支持描述，含平台差异）。(MDN Web Docs)
  • StreamingMedia / Bitmovin 等文章说明 Chrome/Chromium 的 HEVC 支持依赖平台并且对于 DRM 有额外限制。(Streaming Media)
  • 关于浏览器播放本地文件的常见实践（<input type="file">、本地 HTTP server 等）。(Stack Overflow)
  • ffmpeg 转码命令与实践（转码示例）。(Super User)