SuperAPI AI 工具集

sirv-media-viewer

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

Sirv Media Viewer(SMV)适用于需要交互式产品媒体而非仅图片 URL 的场景,支持画廊、缩略图、缩放、360 旋转、视频、3D 模型、智能画廊、全屏、懒加载与响应式行为。

用途:构建、审查或调试 Sirv 产品画廊、缩放查看器、360 旋转、视频、YouTube/Vimeo 嵌入、3D 模型等。

主要能力:单条目、显式子条目画廊、单 div 逗号分隔画廊、.view 智能画廊、网格或滑块;支持 data-options、SirvOptions.viewer、data-breakpoints 配置;图片变换走 Sirv Dynamic Imaging URL/配置。

使用方式:先确认媒体集与查看器形态;在文档 head 中加载一次 Sirv JS(如 https://scripts.sirv.com/sirvjs/v3/sirv.js);使用 class="Sirv" 容器加子 div data-src,或单 div class="Sirv" data-src;行为放 data-options,图片变换放 Dynamic Imaging URL。首屏/LCP 相关查看器可用 autostart:created、preconnect 并预留稳定布局空间。

限制与注意:修改选项名、模块名、事件/API 或 CSP 前应查阅官方文档;需为 scripts.sirv.com、账户/自定义 Sirv 域、video.sirv.com、stats.sirv.com、blob:、data: 及内联/eval 配置 CSP;避免无脚本的 Sirv 标记、首屏默认懒加载、未预留空间导致 CLS、缺少 data-alt 等。创建旋转素材用 ../sirv-360-spin/SKILL.md,视频编码/流媒体策略用 ../video-optimization/SKILL.md。具体价格、平台支持等资料暂未提供。