HTML5视频 - 获取最终的src URL目标

Question

我在我的网站上显示来自第三方服务的视频内容：

<video src="http://www.example.com/api/v1/media/video.mp4?status=true"></video>

该服务会检测用户的地理位置和浏览器语言，并返回符合这些参数的视频。

http://www.example.com/api/v1/media/video.mp4?status=true REDIRECT TO http://www.example.com/api/v1/media/US/EN/English_CAT.mp4

除媒体URL外，该服务不提供特定用户收到的实际文件名。

如何获取最终的媒体路径/名称？尝试了多种方式，但iframe被X-Frame-Options阻止：DENY和AJAX也被阻止。

Answer 1

简短的回答是你可能无法在客户端做到这一切。您将遇到same-origin个问题。此外，无法直接获取CORS元素的HTTP标头。

如果视频服务提供商支持CORS，您可以通过变通方法获取最终到达网址。即使启用了<video>，您也无法从XMLHttpRequest元素获取视频的HTTP标头或最终网址。

您可以通过以下方式解决此问题：

1. 向同一网址发送第二个HTTP请求（$.ajax，fetch，GET等）。
2. 发出HEAD个请求，而不是GET个请求。 HEAD个请求将尝试检索整个文件。 var request = new Request(yourVideoUrl); request.mode = 'cors'; request.method = 'HEAD'; fetch(request) .then(function(res){ console.log(res.url); // This should be the final URL }); 请求不会下载正文，只有标题，这足以解决重定向问题。
3. 查看最终网址路径的HEAD响应标题。

以下是使用fetch的示例：

MARKET
LIMIT
STOP
STOP_LIMIT
MARKET_ON_CLOSE