⚠️
重要前提
安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →
Hotwire媒体内容开发指南：使用Stimulus和Turbo Frames实现富媒体功能
hwc-media-content by thehotwireclub/hotwire_club-skills
安装命令
npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-media-content🇨🇳中文介绍
媒体与富内容
使用 Stimulus 和 Turbo Frames 实现以媒体为中心的 Hotwire 功能。
核心工作流程
- 识别媒体模式：上传/预览、播放控制、进度持久化或嵌入式库集成。
- 将媒体状态保存在 Stimulus 值中；通过值回调和目标桥接第三方 API。
- 优先使用浏览器原生 API（
URL.createObjectURL、画中画、IntersectionObserver、MediaSession）。 - 在
disconnect()中清理所有分配的资源（观察器、blob URL、播放器实例、计时器）。 - 仅持久化有意的客户端状态（例如播放进度），并在加载时进行协调。
防护措施
- 图像/文件预览渲染后撤销 blob URL。
- 优先使用浏览器 API 的功能检测（画中画/Web 分享/MediaSession）。
- 避免混合传输关注点；媒体渲染属于此处，流编排属于实时技能。
- 对于基于时间的 UI（歌词、轮播、进度小部件），保持帧更新为增量式。
选择性加载参考
仅打开当前请求所需的文件。
- 通过 blob URL 上传预览：
references/2024-09-17-stimulus-image-upload-previews.md - 渐进式图像加载和 Blurhash：
references/2024-04-23-stimulus-progressive-image-loading-blurhash.md - 画中画行为：
references/2024-06-04-stimulus-picture-in-picture.md
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
