Javascript 向IMG、视频和音频请求添加自定义标题

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

装饰URL目前不是一个选项，因为网关正在查找标题

我可以通过AJAX请求获取内容，并将标题添加到AJAX请求中，然后重新组装内容，对其进行base64编码，然后使用

数据：

URI为

src

将其提供给图像、视频或音频元素。但这是非常低效的，尤其是对于视频，我们认为视频内容可能高达120MB。这种技术也不允许视频元素缓冲流

因此，我正在寻找如何使用本机浏览器行为的想法，但需要注入所需的自定义头。能给我一些吗

或

---

您希望使用浏览器的本机功能下载和呈现图像、音频和视频请求。简单的解决方案：使用

，然后当您想要下载某些内容时，将src设置为图像、音频或视频的URL。例如

---

据我所知，实现这一点的唯一方法是使用XMLHttpRequest或fetch，但您可以尝试检索视频的二进制数据，并使用本机流API对其进行流式处理

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

您可以将不同的字节附加到媒体源

我差点就成功了

<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>

vd（“ok.mp4”）
功能vd（src）{
var v=document.createElement（“视频”）
document.body.appendChild（五）
//v.autoplay=true
v、 控件=真
//v.src=src
v、 play（）
变量mime=
'视频/mp4；'+
'codecs=“avc1.42E01E，mp4a.40.2”
var ms=new MediaSource（）
v、 src=URL.createObjectURL（ms）
addEventListener女士(
“sourceopen”，
函数（）{
如果(
！MediaSource。
isTypeSupported(
哑剧表演
)
){
u、 innerHTML=“eh”
返回
}
var sb=ms.addSourceBuffer（mime）
fatch（src，功能（d，hd）{
u、 innerText=770+hd
u、 innerText+=“7+（“+d.length
某人（d）
某人补充说(
“更新”，
函数（）{
u、 innerText++“&&77++”
endOfStream女士（）
v、 play（）
}
)
某人补充说(
“错误”，
职能（e）{
u、 innerText+=Object.entries（e）
}
)
某人补充说(
“中止”，
职能（e）{
u、 innerText+=Object.entries（e）
}
)
某人补充说(
“更新”，
职能（e）{
u、 innerText+=Object.entries（e）
}
)
某人补充说(
“更新启动”，
职能（e）{
u、 innerText+=“正常人”
//+目标（e）
}
)
})
}
)
}
功能对象（obj）{
变量d=[]
用于（obj中的var k）{
d、 push（[k，JSON.stringify（obj[k]））
}
返回JSON.stringify（d，4,4,4）
}
函数fatch（url，obj1）{
var obj=obj1
如果（！typeof（obj）=“object”）obj={}
if（typeof（url）=“string”）obj.url=url
if（typeof（url）=“object”）obj=url
如果（类型（obj1）=“功能”）obj.cb=obj1
var x=新的XMLHttpRequest（）
x、 onload=函数（）{
if（类型（对象cb）=“功能”）{
obj.cb(
x、 答复,，
x、 getAllResponseHeaders（）
)
}
}
如果（类型）(
对象标题
)=“对象”）{
Object.entries(
对象标题
).forEach（函数（z）{
x、 集标题(
z[0],，
z[1]
)
})
}
x、 responseType=“arraybuffer”
x、 打开（“get”，obj.url）
x、 发送（）
}

尽管问题是mediasource只能处理碎片化的MP4

---

但是，通过进一步的研究，应该可以在mp4视频的各个部分发生冲突后，使用JavaScript手动/自动分割它们，可能是使用ffmpeg.js

您找到了解决方案吗？遇到了同样的情况，我必须将身份验证令牌放在请求头中。有什么想法吗？@ramanujan for img是您无法手动获取字节的原因是什么？这无助于解决自定义请求头问题，这是问题的核心。