将自定义标头添加到IMG,VIDEO和AUDIO请求

问题描述:

我正在做一个项目,我们需要在浏览器中的图像,视频和音频内容的HTTP请求中添加一些自定义标头.我一直在环顾四周,除了可能创建浏览器插件外,并没有真正找到一个好的答案.

I am working on a project where we need to add some custom headers to the HTTP requests for image, video and audio content in the browser. I've been looking around and not really coming up with a good answer, other than possibly creating browser plugins.

目前无法选择装饰网址,因为网关正在寻找标头.

Decorating the URL is not an option at this time because the gateway is looking for headers.

我可以通过AJAX请求获取内容并将标头添加到AJAX请求中,然后重新组合内容,对它进行base64编码,然后使用data: URI将src内容提供给图像,视频或音频元素>.但这效率极低,尤其是对于视频,我们认为其中的内容可能多达120MB.此技术也不允许视频元素缓冲流.

I can get the content by AJAX requests and adding the header to AJAX requests, then reassembling the content, base64 encoding it, then feeding that to the image, video or audio element, using a data: URI for the src. but that is horribly inefficient, especially for videos, where we think the content may be as much as 120MB. This technique also does not allow the video element to buffer the stream.

因此,我正在寻找有关如何使用本机浏览器行为的想法,但需要注入所需的自定义标头.我可以吗

So I am looking for ideas on how the native browser behavior can be used, but with injecting the required custom headers. Can I have

<img src="javascript:MyFunction(this)" />

<video src="javascript:MyFunction(this)" />

您要使用浏览器的本机功能来下载和呈现图像,音频和视频请求.简单的解决方案:使用<iframe/>,然后在要下载内容时,将src设置为图像,音频或视频的URL.例如...

You want to use the browser's native capability of downloading and rendering your image, audio, and video requests. Easy solution: Use an <iframe/>, then when you want to download something, set the src to the URL of the image, audio, or video. For instance...

<iframe src="https://wikipedia.com"/>

在此代码段中,我使用了一个简单的URL,而不是实际的图像,视频或音频文件,因为不建议在线进行热链接.

I went with a simple URL in this code snippet, and not an actual image, video, or audio file, since hotlinking is discouraged online.

通过使用iframe,浏览器的所有自然下载和渲染元素都将可用,此外,您可以将iframe放在应用程序中的任何位置,从而完全控制浏览器的可靠性.

By using an iframe, all of the browser's natural downloading and rendering elements will be available, plus, you can put the iframe anywhere in your app, giving you total control along with browser reliability.