Setting Up Video Qualities

To utilize different video qualities (144p, 240p, 360p, 480p, 720p, 1080p, 1440p, 2160p) there are two required steps.

1. Add a source tag to the Custoplayer tag
   • The src attribute should be set to the video
   • The id of the source tag should be set to custoplayer-{your-quality}
     • For example, the 1080p source should have an id of custoplayer-1080
2. Add a settingsButton1 with the options object having quality: true

Code Example

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function QualityExample() {
  return (
    <Custoplayer
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            quality: true,
          },
        },
        item2: {
          id: 'progressBar3',
        },
      }}
    >
      <source
        id='custoplayer-1080'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      />

      <source
        id='custoplayer-720'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-720.mp4'
      />

      <source
        id='custoplayer-480'
        type='video/mp4'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-480.mp4'
      />
    </Custoplayer>
  );
}

Video Example