Add custom headers to IMG, VIDEO and AUDIO requests

前端 未结 2 722
挽巷
挽巷 2021-02-20 15:56

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 rea

相关标签:
2条回答
  • 2021-02-20 16:13

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

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

    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.

    0 讨论(0)
  • 2021-02-20 16:14

    As far s I'm aware the only way to do this is with XMLHttpRequest or fetch, BUT you can tried l retrieve binary data for videos and stream it using native stream APIs.

    If the server allows partial requests, which allows you to get a certain amount of bytes only

    You can append the different bytes to a mediasource https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

    I almost got it working

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

    Although the problem is that mediasource can only deal with fragmented mp4s https://github.com/w3c/media-source/issues/216 https://stackoverflow.com/a/18745164/2016831

    But with some more research it should be possible to manually/automatically fragment the sections of the mp4 video with JavaScript after they're feutched, possibly using ffmpeg.js

    0 讨论(0)
提交回复
热议问题