🎬 Trilium Video Embed (视频嵌入解决方案)
December 19, 2025 · View on GitHub
这是一个为 Trilium Notes 打造的高效视频嵌入插件。它解决了 Trilium 默认编辑器在处理视频时常见的“代码被清洗”和“编辑不便”等痛点。
🌟 核心特性
- 🛡️ 数据永不丢失：采用
<a>锚点链接存储机制，利用 CKEditor 的原生规则保护视频 URL 不被编辑器误杀清洗。 - 🎮 极致播放体验：
- 只读模式：自动渲染为全功能 HTML5 播放器或 iframe 嵌入窗。
- 支持特性：加载动画、错误重试、一键复制源链接、鼠标悬停显示 URL 预览。
- ✨ 编辑模式友好：视频链接自动美化为紫色“胶囊按钮”，支持像普通文字一样点击、移动或删除。
- 🌍 全平台支持：
- 本地/直链：mp4, webm, m3u8, ogg, mov 等（支持 Alist/Localhost）。
- 在线平台：Bilibili (自动转换 BV 号), YouTube, Vimeo, 优酷, 腾讯视频等。
- ⚡ 结构自动修复：一键转换笔记中的原始 URL 文本或旧版插件留下的损坏 HTML 结构。
🛠️ 工作原理
本插件通过 “链接存储 + 动态渲染” 的分层设计实现：
| 维度 | 处理方式 | 优点 |
|---|---|---|
| 存储 (Data) | <a href="url#video-native"> | 遵循 CKEditor 标准，100% 安全 |
| 编辑 (Edit) | CSS 美化胶囊按钮 | 界面整洁，位置清晰，便于管理 |
| 只读 (View) | JS 动态替换为播放器 | 互不干扰，性能卓越 |
🚀 安装步骤
- 在 Trilium 中创建一个新笔记（类型选择 JS Frontend）。
- 给笔记添加一个属性：
#widget。 - 将本仓库中的
VideoEmbed.js代码全部复制粘贴进去。 - 按下
Ctrl + R刷新 Trilium。
📖 使用指南
1. 添加视频
直接在笔记中粘贴视频的原始 URL（例如 B 站视频页链接或本地 MP4 地址）。
2. 转换链接
点击工具栏上的 🎬 🎬 (转换视频链接) 按钮。
- 本地视频 会加上
#video-native标记。 - 平台视频 会加上
#video-iframe标记。
3. 查看与播放
- 编辑模式：你会看到一个精美的紫色按钮，显示视频文件名。
- 只读模式：插件会自动扫描并渲染出视频播放器。
📁 支持格式一览
| 类别 | 支持说明 |
|---|---|
| 直链视频 | .mp4, .webm, .m3u8, .ogg, .mov, .mkv, .avi, .flv |
| 本地服务 | localhost, 127.0.0.1, Alist 网盘直链 |
| 视频平台 | Bilibili (BV/AV), YouTube, Vimeo, 优酷, 腾讯, 抖音 |
🤝 贡献与反馈
如果你在使用过程中遇到任何问题，或者有更好的正则匹配建议，欢迎提交 Issue 或 Pull Request！
享受在 Trilium 中观看视频的自由吧！ 如果这个工具帮到了你，请给一个 ⭐️ Star！