@file-viewer/renderer-media

中文文档
3.3.3发布于 2026/10/31Apache-2.0TypeScriptES Module构建来源已验证近 30 天下载 6.2万

文件查看器的独立本地音频和视频渲染器;HLS倒置和MIDI检查是明确的选入能力.

中文使用文档
文档目录3 节
  1. 使用
  2. 能力
  3. 迁移说明

@file-viewer/renderer-media

English · 简体中文

Flyfish File Viewer 的基础音视频 renderer 包,默认只提供浏览器原生音频和视频播放。HLS fallback 与 MIDI 检查分别由 @file-viewer/capability-streaming-media、@file-viewer/capability-midi 显式启用,不进入 standard/full 默认闭包。

使用

import { mediaRenderer } from '@file-viewer/renderer-media'

const options = {
  builtinRenderers: 'none',
  renderers: [mediaRenderer],
}

也可以通过全量 preset 自动装配:

import { allRenderers } from '@file-viewer/preset-all'

const options = {
  builtinRenderers: 'none',
  renderers: allRenderers,
}

能力

  • MP4、WebM 和常见音频格式优先使用浏览器原生 <video> / <audio> 控件。
  • MP4 会读取视频轨的编码标识。浏览器无法解码 MPEG-4 Part 2(mp4v)Simple Profile 时,renderer 会按需启动独立 Worker,使用 AAC 音轨校时,并把软件解码的 I420 画面绘制到 Canvas,不再出现“有声音、画面全黑”。
  • MP4V 后备解码器来自 AOSP PacketVideo,许可证为 Apache-2.0。WASM 为 111,379 字节(gzip 34,410 字节),仅在原生解码失败时加载。实现不包含 FFmpeg、libav 或 LGPL/GPL/AGPL 源码。
  • 浏览器缺少 Worker、OffscreenCanvas 或 VideoFrame,或者文件超出当前解码范围时,会显示明确的兼容提示。面向更多浏览器发布时,H.264/AVC 仍是更省 CPU 的选择。
  • 安装 streaming-media capability 后,HLS .m3u8 优先使用浏览器原生能力,不支持时才加载 hls.js。
  • 安装 MIDI capability 后,MIDI / MID 才加载 @tonejs/midi 并展示曲名、时长、PPQ、轨道和音符摘要。
  • 所有资源在卸载时清理对象 URL、播放器状态和 HLS 实例,适合长时间运行的后台系统。

迁移说明

@file-viewer/core 不内置 media renderer。standard 只装配本包的原生媒体路径;打开 .m3u8、.midi 或 .mid 时会给出对应的 npx file-viewer-cli add ... 命令。preset-all 仅用于显式全量/调试并注册两项可选能力。

版本与发布记录

@file-viewer/renderer-media 共发布 57 个版本,首次发布于 2026/06/23;过去 12 个月发布了 57 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
3.3.3latest2026/10/3114 天前
3.3.12026/10/3015 天前
3.3.02026/10/2718 天前
3.2.22026/10/1827 天前
3.2.12026/10/1530 天前
3.2.02026/10/1530 天前

关于 @file-viewer/renderer-media 的常见问题

@file-viewer/renderer-media 是什么?

文件查看器的独立本地音频和视频渲染器;HLS倒置和MIDI检查是明确的选入能力.

如何安装 @file-viewer/renderer-media?

在项目目录运行 npm install @file-viewer/renderer-media,或使用 pnpm add / yarn add / bun add。

@file-viewer/renderer-media 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@file-viewer/renderer-media 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@file-viewer/renderer-media 可以商用吗?

@file-viewer/renderer-media 使用 Apache-2.0 许可。宽松许可:允许商业使用、修改和再分发,并附带明确的专利授权;分发时需保留许可与 NOTICE 文件,修改过的文件要注明改动。以上为概括,不构成法律意见,请以许可原文为准。

@file-viewer/renderer-media 的下载量有多少?

根据 npm 官方下载统计,@file-viewer/renderer-media 在 2026/10/15 – 2026/11/13 这 30 天内被下载 61,581 次,日均约 2,053 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@file-viewer/renderer-media 还在维护吗?

最新版本 3.3.3 发布于 2026/10/31(14 天前);至今共发布 57 个版本,其中过去 12 个月发布了 57 个;首次发布于 2026/06/23。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。