在讲解具体实现前,先给出结论:如果预算充足并追求稳定体验,选择商业CDN(如Akamai、Fastly、Cloudflare Stream)搭配专用服务器和HTTPS是最好的方式;如果想要性价比与可控性兼顾,采用对象存储(S3/OSS)+中小型CDN+自建Nginx源站是最佳方案;而想要最便宜的方案,可以用免费或低价的公共CDN(Cloudflare免费计划)结合WordPress缓存插件实现视频加速与边缘缓存,注意带宽与吞吐限制。
WordPress多站点(Multisite)常见两种模式:子域和子目录。跨域播放问题多出现在子域或不同域名的多站点部署。部署时建议统一外部资源域名,设置统一的媒体域(例如media.example.com),将所有视频上传或同步到该域名的服务器并由CDN加速,这能最大化缓存命中率并简化证书管理。
配置CDN时优先使用Origin Pull(来源拉取),将服务器设为源站并开启HTTPS。设置缓存规则(按文件后缀:.mp4/.m3u8/.ts),并允许Range请求以支持进度跳转。若使用对象存储作为源,开启静态网站托管或签名URL机制来保护私有内容。
视频跨域播放核心在于响应头。源站或CDN需要返回Access-Control-Allow-Origin头,常见设置为具体域名或通配符(*)。对于带认证或自定义头的请求,还需返回Access-Control-Allow-Credentials和Access-Control-Allow-Headers。Nginx示例:在视频路径响应中添加header Access-Control-Allow-Origin "*"; 同时确保响应包含Accept-Ranges。
流媒体(HLS/DASH)通过.m3u8/.mpd和分片(.ts/.m4s)工作,CDN需正确配置MIME类型并缓存分片。跨域时不仅.m3u8需要CORS,分片文件同样需要CORS头。并确保CDN允许基于查询字符串的缓存键(如果使用签名或带参数URL)。
在源站服务器上:启用Gzip但对视频禁用压缩,设置Expires/Cache-Control适当的缓存策略,启用Keep-Alive与大文件的sendfile/tcp_nopush优化,允许大文件上传与断点续传,配置Accept-Ranges,保证Range请求快速响应。
若需保护视频,可使用签名URL(CDN或应用层生成短期有效的Token)或Referer白名单。签名URL在多站点场景下建议中心化生成并统一验证,避免各子站重复实现。注意签名会影响缓存策略,通常需在CDN端支持签名验证并将签名参数排除在缓存Key之外或配置按参数缓存。
在WordPress中建议使用媒体域替换或插件(例如WP Offload Media)将上传的媒体推送到对象存储或CDN。对于多站点,配合网络激活插件并设置统一媒体域,避免每个站点单独存储视频。前端播放器(Video.js、hls.js)应配置跨域与凭证策略。
成本上,商业CDN按流量计费但提供全球加速与稳定;对象存储+小型CDN组合在中流量场景下性价比高;免费方案适合测试或低流量站点,但需评估带宽峰值。根据观看地域、并发量与带宽峰值选择合适的套餐,并使用边缘缓存、压缩封包(分片)与智能分发降低成本。
遇到跨域或播放失败时,依次检查:浏览器控制台的CORS错误、CDN是否透传CORS头、源站是否返回Accept-Ranges、SSL证书是否覆盖媒体域、签名URL是否过期、MIME类型与分片是否可访问。此外可通过curl -I检查响应头,或直接绕过CDN访问源站确认问题来源。
推荐步骤:1)统一媒体域并购买或配置证书;2)将媒体迁移到对象存储或稳定源站;3)在CDN端配置来源拉取、缓存规则与CORS;4)在源站(Nginx/Apache)启用Accept-Ranges与正确头部;5)在WordPress中使用离线媒体插件与前端播放器正确配置。这样既能解决跨域播放问题,又能实现可靠的视频加速与多站点部署的可维护性。
