Hls quality (#409)

* update docs

packages/artplayer-document/docs/en/Libraries.mdx

@@ -63,6 +63,13 @@ var art = new Artplayer({
                 hls.destroy();
             }
 
+            // When the player is destroyed, the decoder instance must also be destroyed
+            art.on('destroy', () => {
+                if (hls) {
+                    hls.destroy();
+                }
+            });
+
             hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(video);

packages/artplayer-document/docs/en/Plugins/hls-quality.mdx

@@ -0,0 +1,41 @@
+---
+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`

packages/artplayer-document/docs/en/Plugins/iframe.mdx

@@ -5,7 +5,7 @@ sidebar_position: 3
 
 ## Overview
 
-With this plug-in, you can easily control the player in the `iframe` page in the `main page`.
+With this plugin, you can easily control the player in the `iframe` page in the `main page`.
 
 For example, you can control the functions of the `iframe` player through code in the `main page`, or get the value of the `iframe` player.
 

packages/artplayer-document/docs/zh-cn/Libraries.mdx

@@ -61,6 +61,13 @@ var art = new Artplayer({
                 hls.destroy();
             }
 
+            // 播放器销毁时，也要销毁解码器实例
+            art.on('destroy', () => {
+                if (hls) {
+                    hls.destroy();
+                }
+            });
+
             hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(video);

packages/artplayer-document/docs/zh-cn/Plugins/hls-quality.mdx

@@ -0,0 +1,41 @@
+---
+title: Hls 画质插件
+sidebar_position: 4
+---
+
+## 说明
+
+通过该插件，可以添加 `Hls` 画质列表到控制栏或者设置面板里
+
+## 演示
+
+👉 [查看完整演示](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)
+
+## 安装
+
+### 通过 `npm` 安装：
+
+```bash
+$ npm install artplayer-plugin-hls-quality
+```
+
+### 通过 `yarn` 安装：
+
+```bash
+$ yarn add artplayer-plugin-hls-quality
+```
+
+### 通过 `script` 安装：
+
+```html
+<!-- 本地 -->
+<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>
+```
+
+然后你可以通过 `window.artplayerPluginHlsQuality` 访问到插件函数