---
title: Hls Quality Plugin
sidebar_position: 4
---

## Overview

With this plugin, you can add the `Hls` video quality list to the control or the settings panel

## Demo

👉 [View Demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)

## Install

### Install from `npm`:

```bash
$ npm install artplayer-plugin-hls-quality
```

### Install from `yarn`:

```bash
$ yarn add artplayer-plugin-hls-quality
```

### Install from `script`:

```html
<!-- local -->
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
```

Then you can access the plugin function through `window.artplayerPluginHlsQuality`