向 IMG、VIDEO 和 AUDIO 请求添加自定义标头

Posted 2023-02-19

【中文标题】向 IMG、VIDEO 和 AUDIO 请求添加自定义标头

【英文标题】：Add custom headers to IMG, VIDEO and AUDIO requests

【发布时间】：2015-10-02 08:27:00

【问题描述】：

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

此时装饰 URL 不是一个选项，因为网关正在寻找标头。

我可以通过 AJAX 请求获取内容并将标头添加到 AJAX 请求，然后重新组装内容，对其进行 base64 编码，然后将其提供给图像、视频或音频元素，使用 data: URI 为 @987654322 @。但这是非常低效的，尤其是对于我们认为内容可能高达 120MB 的视频。这种技术也不允许视频元素缓冲流。

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

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

或

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

【问题讨论】：

你找到解决办法了吗？

遇到了同样的情况，我必须将身份验证令牌放入 的请求标头中。有什么想法吗？

@ramanujan for img 是您无法手动获取字节的原因吗？

【参考方案1】：

您希望使用浏览器的本机功能来下载和呈现您的图像、音频和视频请求。简单的解决方案：使用<iframe/>，然后当您要下载某些内容时，将 src 设置为图像、音频或视频的 URL。比如……

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

我在这段代码 sn-p 中使用了一个简单的 URL，而不是实际的图像、视频或音频文件，因为不鼓励在线盗链。

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

【讨论】：

这对解决自定义请求头问题没有任何帮助，这是问题的核心。

【参考方案2】：

据我所知，唯一的方法是使用 XMLHttpRequest 或 fetch，但您可以尝试检索视频的二进制数据并使用本机流 API 进行流式传输。

如果服务器允许部分请求，则只允许你获取一定数量的字节

您可以将不同的字节附加到媒体源https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

我差点搞定了

<div id="u"></div>
<Script>
vd("ok.mp4")
function vd(src) 
    
    var v=document. createElement("video")
    document.body.appendChild(v)
//  v.autoplay=true
    v. controls=true
//  v.src=src 
    v.play()
    
    var mime=
        'video/mp4; '+
        'codecs="avc1.42E01E, mp4a.40.2"'
    var ms= new MediaSource()
    v.src=URL.createObjectURL(ms)
    
    ms.addEventListener(
        "sourceopen", 
        function ()
            if(
                !MediaSource.
                isTypeSupported(
                    mime
                )
            )
                u.innerhtml="eh"
                return
            
            var sb= ms.addSourceBuffer(mime)
            fatch(src, function (d,hd)
                u.innerText=770+hd
                u.innerText+="7+("+d.length
                sb.appendBuffer(d)
                
                
                sb.addEventListener(
                    "updateend",
                    function ()
                        u.innerText+="&&77++"
                        ms.endOfStream()
                        v.play()
                    
                )
                sb.addEventListener(
                    "error",
                    function (e)
                        u.innerText+=Object.entries(e)
                    
                )
                sb.addEventListener(
                    "abort",
                    function (e)
                        u.innerText+=Object.entries(e)
                    
                )
                sb.addEventListener(
                    "update",
                    function (e)
                        u.innerText+=Object.entries(e)
                    
                )
                sb.addEventListener(
                    "updatestart",
                    function (e)
                        u.innerText+="ok man"
                    //  +objecktify(e)
                    
                )
                
                
                
            )
        
    )
    


function objecktify(obj) 
    var d=[]
    for(var k in obj)
        d.push([k,JSON.stringify(obj[k])])
    
    return JSON.stringify(d,4,4,4)

function fatch(url, obj1) 
    var obj=obj1
    if(!typeof(obj)=="object")obj=
    if(typeof(url) == "string") obj.url= url
    if (typeof(url)=="object") obj=url
    if(typeof(obj1)=="function") obj.cb=obj1
    
    var x= new XMLHttpRequest ()
    x.onload= function ()
        if(typeof (obj.cb)=="function")
            obj.cb(
                x.response,
                x.getAllResponseHeaders()
            )
        
    
    if(typeof(
        obj.headers
    )=="object") 
        Object.entries(
            obj.headers
        ).forEach(function (z)
            x.setHeader(
                z[0],
                z[1]
            )
        
        )
    
    
    x.responseType="arraybuffer"
    x.open("get",obj.url)
    x.send()

</Script>

虽然问题是mediasource只能处理碎片化的mp4https://github.com/w3c/media-source/issues/216https://***.com/a/18745164/2016831

但是通过更多的研究，应该可以在 mp4 视频的片段被提取后手动/自动分段，可能使用 ffmpeg.js