在独立开发视频处理类应用时，如何高效展示产品功能是提升用户体验的关键环节之一。以我开发的 Video Splitter 为例，这款基于 Web 的视频切割工具，旨在帮助用户按时长快速分割视频文件。为了让用户直观体验产品能力，我参考 tinyhelpers 创始人 Stefan Judis 的建议1，增加了“一键演示”功能：用户无需上传文件，即可通过内置示例视频直接体验切割效果。
然而，在实现过程中，我遇到了一个普遍性的技术挑战：跨域资源共享（CORS）限制。大多数公开视频资源的服务器未配置 CORS 许可，导致浏览器基于安全策略拦截 <video> 标签的视频请求，演示功能无法正常运行。为了避免繁琐的后端代理或服务器配置，我决定寻找支持跨域访问的公开 MP4 视频资源。
通过多轮测试和筛选，整理出一份可直接嵌入 <video> 标签的高质量视频地址清单。这些资源无需额外配置，即可用于开发测试或功能演示，助力开发者专注核心逻辑。
6 个支持跨域的 MP4 示例视频地址
以下视频均为公开可访问资源，涵盖动画、新闻、风景等多种场景，分辨率和时长适中，适合作为演示素材。所有链接均经过验证，可直接嵌入 <video> 标签使用：
- 西瓜视频 - 播放器测试视频
- W3Schools - Big Buck Bunny 动画片段
- W3C - Sintel 动画预告片
- 山东卫视 - 新闻报道片段
- 人民日报 - 晋宁南滇池风景宣传片
- 小红书 - Secret World 示例视频
小红书视频的跨域加载方案
上述清单中，小红书平台的公开视频链接无法直接得到，可通过“解析 + 域名替换”来获得克跨域加载的视频 url。具体步骤如下：
- 使用第三方小红书视频解析工具，获取视频的原始 MP4 链接；
- 将解析后的链接域名替换为
sns-bak-v1.xhscdn.com； - 示例（已处理）：Secret World
注意：小红书视频链接可能随平台政策变化而失效，建议开发者定期更新测试。
实际使用示例（HTML 代码）
将上述视频地址嵌入 <video> 标签，并添加 controls 属性，即可实现播放控制。以下是基于 W3Schools 示例的完整代码：
html
