video quality and network detection

[suvamkundu]

Hello, We are the using the old version of plyr.io video player and recently we have added the video quality feature, where the user can select the preferred video quality. We just had a question. If we add 3 videos for 3 different video resolution, which one will be selected as default? Does the Plyr automatically detects the network speed and plays the best suitable one? or is it related to ordering of the 'source' tag?

[hrishikesh-k]

You can set the default quality when you initialize Plyr like this:

var players = Plyr.setup('.js-player',
  {
    quality:
      {
        default: 720
      }
  }

If the default quality isn't there in the markup, the highest one is probably selected.

From my knowledge, Plyr won't switch quality based on network speed, you'd have to do it yourself.

EDIT: That's how it's done in the latest version, not sure about the old one.

[suvamkundu]

Hi @sampotts , we have achieved it. But we have a new query, in the quality section it shows the quality as 1080,720,480 and so on, according to the value assigned to the size attribute. can we change it and provide a title for the sources quality, so that in the player it shows as High, medium and low instead of the actual resolution value? (1080,720,480)

[hrishikesh-k]

Yes, you can do it like this:

var players = Plyr.setup('.js-player',
  {
    // your config
    i18n:
      {
        qualityLabel:
          {
            1080: 'High',
            720: 'Medium',
            // and so on...
          }
      }
  });

[suvamkundu]

Hi, thank you for your help. we are setting up the player in this manner, const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}}); player.source = { type: 'video', title: '576 resolution video', poster: poster, sources: [ { src: lowSrc, type: 'video/mp4', size: 480, }, { src: medSrc, type: 'video/mp4', size: 720, }, { src: highSrc, type: 'video/mp4', size: 1080, } ], };

if I put the i18n object inside the sources object it does not work. Can you please suggest where we are going wrong?

[hrishikesh-k]

It doesn't go in sources, it goes in the options, like this:

const player = new Plyr(video,
  {
    captions:
      {
        active: true,
        update: true,
        language: 'en'
      },
    i18n:
      {
        qualityLabel:
          {
            1080: 'High',
            720: 'Medium',
          }
      }
  });

// your sources

[mansouralex]

@suvamkundu what was the solution for the network detection part? ended up doing it manually?