蘑菇视频官网投屏时更新如果只能做一件事：先改这里
投屏功能看似是前端的一项小功能，但在真机联调和用户使用中，经常因为基础环境不到位而百般折腾。要是在一次更新里只能做一件事，我会把所有时间和精力都放在一项改动上：把网站全部切换到 HTTPS，并确保媒体资源通过 HTTPS 提供。
为什么先改 HTTPS？
- 主流浏览器和投屏设备（如 Chromecast、Apple TV、部分智能电视）对安全上下文有严格要求。很多投屏 API、媒体协商、跨域请求在非安全页面会被禁用或降级。
- 投屏时浏览器需要访问到媒体文件的真实 URL，HTTPS 能避免中间人干扰、重定向阻断或浏览器拒绝加载非安全资源。
- HLS/DASH 播放器、分段请求（Range）、跨域授权（CORS）在 HTTPS 下更加稳定，用户卡顿、黑屏、无法连接的情况明显减少。
如何把“切换到 HTTPS”做到位（分场景简明操作）
- 使用 Google Sites 或托管在第三方平台（Netlify、Vercel、GitHub Pages）
- 大多数托管平台会自动处理 TLS。确认站点配置已启用 HTTPS，访问自定义域时也显示绿色锁。
- 自建服务器（Nginx/Apache）
- 申请证书：推荐免费且自动续期的 Let’s Encrypt。
- Nginx：配置 server 块监听 443，设置 sslcertificate、sslcertificate_key，并把 80 的请求 301 跳转到 443。
- Apache：启用 mod_ssl 并配置 VirtualHost，做 80 -> 443 重定向。
- 使用 CDN（Cloudflare、阿里云 CDN 等）
- 在 CDN 面板开启 HTTPS/SSL，并把源站也改成 HTTPS（或启用“全程加密”）。
- 若使用 Cloudflare，选择“完全（严格）”模式并上传有效证书。
把 HTTPS 做对：别忽略的细节
- 媒体文件要支持 Range 请求（Accept-Ranges: bytes），否则投屏设备无法做分段下载，可能导致播放失败或无法快进。
- 正确的 Content-Type（例如 .m3u8 用 application/vnd.apple.mpegurl，.ts 用 video/mp2t），避免播放器识别错误。
- 配置 CORS：如果投屏流程涉及第三方域（CDN、存储桶），在响应头加入 Access-Control-Allow-Origin: * 或限定域名；同时允许必要的头与方法（Access-Control-Allow-Headers/Methods）。
- HLS/DASH 的 playlist、segment 都要通过同一域名或允许跨域，且 HTTPS 全链路一致，避免混合内容被阻止。
- 若使用 Chromecast 等 SDK，确认应用 ID、receiver 配置与 HTTPS 域名匹配；某些开发阶段的自定义 receiver 要在 Google 控制台做白名单。
简单检查清单（更新后立即验证）
- 浏览器地址栏显示安全锁，没有混合内容警告。
- 直接打开媒体文件链接能下载并返回正确的 Content-Type 和 Accept-Ranges。
- 用手机或电脑投屏到目标设备，观察首次连接、播放、快进是否正常。
- 检查控制台是否有跨域、TLS 或被拒绝的请求错误。