Question

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

此时不能选择装饰URL，因为网关正在寻找标题。

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

所以我正在寻找关于如何使用本机浏览器行为的想法，但是注入了所需的自定义标头。我能不能

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

或

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

Answer 1

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

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

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

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

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

尽管问题是媒体源只能处理碎片化的mp4 https://github.com/w3c/media-source/issues/216 https://stackoverflow.com/a/18745164/2016831

但是，通过更多的研究，应该有可能在使用ffmpeg.js的情况下使用JavaScript手动/自动分割mp4视频的各个部分

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

2 个答案: