Upie 影院 Canvas 播放演示
⚠ 仅供乘客观看 · 驾驶请专注路面
↓ 这是隐藏的 <video> 解码器(车机会盯它)
debug…

点击播放 · 画面通过 canvas 逐帧绘制,而非直接用 video 标签

快捷片源:

原理 · 为什么 canvas 能动而 <video> 会被冻成「仅音频」

  1. 车机浏览器的限制盯的是可见且正在播放的 <video> 元素——行驶中检测到它,就冻结画面、只留声音。
  2. 这里把 <video> 隐藏起来只用于解码,再用 requestAnimationFrame + ctx.drawImage(video, …)每一帧画到 <canvas> 上。
  3. 用户看到的是 canvas——车机的启发式不把 canvas 当视频,于是不拦。声音仍由那个隐藏的 video 元素发出。

勾上「显示底层 video」可以同时看到那个被藏起来的解码器,对照理解。

安全 & 合规:本页是技术演示,默认源为 Creative Commons 示例片(Big Buck Bunny)。请仅供乘客观看,驾驶员行车时请勿观看;车机限制本身是安全设计。请勿用于播放未授权 / 盗版内容。