HTML5 video播放器嵌入Twitter视频时出现跨浏览器播放故障问题求助

问题场景 #

通过Twitter API获取推文后，尝试嵌入推文中附带的视频附件，初始使用的嵌入代码如下：

<video controls="">
  <source src="https://video.twimg.com/ext_tw_video/1444247208514113546/pu/vid/1280x720/6rw0rzMWMSk39eoz.mp4?tag=12" type="video/mp4">
</video>

故障表现 #

Firefox浏览器 #

上述代码在Firefox中完全无法渲染视频播放器，直接返回提示：No video with supported format and MIME type found。

注意：将视频URL直接输入地址栏访问时，播放无任何异常。

Chrome浏览器 #

Chrome播放时会在0-4秒内随机停止播放并回到首帧，该现象偶发无固定规律。故障出现后无论点击多少次播放按钮，视频都无法继续加载播放；当视频已加载到内存、刷新页面成功播放一次后，该故障不再出现。
注意：视频URL直接输入地址栏访问时，加载、播放均无异常。

根因说明 #

该问题由Twitter视频CDN的防盗链校验逻辑导致：

• 直接在地址栏访问视频资源时，请求无Referer头，CDN判定为合法请求，返回正常视频流
• 视频嵌入第三方站点时，浏览器默认携带当前站点域名作为Referer头，被CDN识别为跨站盗用请求，拦截返回非视频内容，导致浏览器识别播放失败

修复方案 #

最简单的修复方式是给video标签添加referrerpolicy属性，指定请求资源时不携带Referer头，修改后的嵌入代码如下：

<video controls="" referrerpolicy="no-referrer">
  <source src="https://video.twimg.com/ext_tw_video/1444247208514113546/pu/vid/1280x720/6rw0rzMWMSk39eoz.mp4?tag=12" type="video/mp4">
</video>

如果需要兼容不支持referrerpolicy属性的旧版浏览器，可以在页面head区域添加全局Referer控制标签：

<meta name="referrer" content="no-referrer">

如果站点本身需要保留Referer头用于其他业务逻辑，可以自建后端代理服务，由服务器转发请求Twitter视频资源再返回给前端，同样可以规避防盗链限制。

内容的提问来源于stack exchange，提问作者perrelet