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

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

<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也被阻止.

最佳答案
简短的答案是,您可能无法在客户端上完成全部操作.您将遇到same-origin问题.另外,不可能直接获得< video>的HTTP标头.元件.

如果视频服务提供商启用了CORS支持,则您可以通过变通办法来获得最终URL.即使启用了CORS,您也无法从< video>中获取视频的HTTP标头或最终URL.元件.

您可以通过以下方法解决此问题:

>向相同的URL发出第二个HTTP请求(XMLHttpRequest,fetch,$.ajax等).
>发出HEAD请求而不是GET请求. GET请求将尝试检索整个文件. HEAD请求不会下载正文,而只会下载标头,这足以解决重定向问题.
>在HEAD响应的标题中查找最终的URL路径.

这是使用fetch的示例:

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
});

转载注明原文:javascript-HTML5视频-获取最终的src URL目标 - 代码日志