Search code examples
htmlcssjwplayerjwplayer7

autodetect best quality from multiple sources for current user - jwplayer


Here is my code:

var playerInstance = jwplayer("mySingleVideoWrapper").setup({
        image: getCurrentPosterSrc,
        sources: [
            {
                file: 'file-360.mp4',
                label: "360p"
            },{
                file: 'file-480.mp4',
                label: "480p"
            },{
                file: 'file-720.mp4',
                label: "720p HD"
            },{ 
                file: 'file-1080.mp4',
                label: "1080p HD"
            }
        ], 
        width: "100%",
        androidhls: 'true',
        type: "hls",
        fallback:true,
        aspectratio: "16:9",
        autostart: true,
        logo: { 
        hide: true 
    },
        tracks: [{ 
            file: "/assets/captions-en.vtt", 
            label: "EN",
            kind: "captions",  
            "default": true 
        },{ 
            file: "/assets/captions-es.vtt", 
            label: "ES",
            kind: "captions"
        },{ 
            file: "/assets/captions-fr.vtt", 
            kind: "captions",
            label: "FR"
        },{ 
            file: "js/assets/captions-de.vtt",  
            label: "DE",
            kind: "captions"
        }]
   }); 

And also here is a screenshot where I highlighted what I need enter image description here

So I need that 'Auto' button which will autodetect which is the best quality for current user. Now with my code I see all 4 sources/qualities but 'Auto' button can't see. How can I add it ?


Solution

  • Amazon Support have me this useful article link http://www.jwplayer.com/blog/encoding-hls-with-amazon-elastic-transcoder/ and I could do what I want.