diff --git a/docs/assets/img/alipay.jpg b/docs/assets/img/alipay.jpg
new file mode 100644
index 000000000..c5f08bc1c
Binary files /dev/null and b/docs/assets/img/alipay.jpg differ
diff --git a/docs/assets/img/paypal.svg b/docs/assets/img/paypal.svg
new file mode 100644
index 000000000..7bd8a60d4
--- /dev/null
+++ b/docs/assets/img/paypal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 74" height="54"><g fill="none" fill-rule="evenodd"><rect width="199" height="73" x="0.5" y="0.5" fill="#FFF" fill-opacity="0.889" stroke="#979797" stroke-opacity="0.207" rx="8"></rect><path fill="#003087" fill-rule="nonzero" d="M77.5599861,42.672 C82.5421299,42.6678941 86.7787401,39.0351801 87.5429861,34.112 C88.3229861,29.145 84.4419861,24.8089419 78.9429861,24.8089419 L70.0799861,24.8089419 C69.7362553,24.8045668 69.4418457,25.054175 69.3899861,25.394 L65.4399861,50.466 C65.411103,50.6513547 65.4646051,50.8400802 65.5864664,50.9827001 C65.7083276,51.1253201 65.8863949,51.2076112 66.0739861,51.2080349 L70.7639861,51.2080349 C71.1069609,51.2114294 71.4002308,50.9620648 71.4519861,50.623 L72.6139861,43.258 C72.665345,42.9181575 72.9593063,42.6681411 73.3029861,42.672 L77.5599861,42.672 Z M81.4849861,33.886 C81.1949861,35.722 79.7759861,37.075 77.0599861,37.075 L73.5859861,37.075 L74.6389861,30.395 L78.0499861,30.395 C80.8599861,30.401 81.7729861,32.058 81.4849861,33.891 L81.4849861,33.886 Z M107.862986,32.706 L103.409986,32.706 C103.066412,32.702002 102.772249,32.9514007 102.719986,33.291 L102.575986,34.215 C102.575986,34.215 99.1189861,30.44 93.0009861,32.99 C89.4909861,34.451 87.8069861,37.47 87.0909861,39.68 C87.0909861,39.68 84.8139861,46.398 89.9609861,50.097 C89.9609861,50.097 94.7319861,53.653 100.105986,49.877 L100.012986,50.466 C99.9837482,50.6514164 100.037121,50.8403412 100.159058,50.9830492 C100.280994,51.1257572 100.459279,51.207952 100.646986,51.208 L105.097986,51.208 C105.441717,51.2124332 105.736126,50.962825 105.787986,50.623 L108.495986,33.448 C108.524869,33.2626453 108.471367,33.0739198 108.349506,32.9312999 C108.227645,32.7886799 108.049577,32.7063888 107.861986,32.706 L107.862986,32.706 Z M101.315986,42.198 C100.955689,44.6729154 98.8208538,46.5000884 96.3199861,46.474 C95.8464479,46.4793866 95.3750127,46.4102067 94.9229861,46.269 C93.0029861,45.653 91.9079861,43.807 92.2229861,41.807 C92.5837159,39.3248218 94.7289785,37.494888 97.2369861,37.53 C97.7109861,37.525 98.1829861,37.595 98.6349861,37.736 C100.547986,38.35 101.635986,40.196 101.320986,42.198 L101.315986,42.198 L101.315986,42.198 Z"></path><path fill="#0070E0" fill-rule="nonzero" d="M141.671986,42.672 C146.656916,42.6706404 150.897643,39.037672 151.663986,34.112 C152.442986,29.145 148.562986,24.8089637 143.061986,24.8089637 L134.201986,24.8089637 C133.85879,24.805503 133.565196,25.0547804 133.512986,25.394 L129.550986,50.473 C129.504409,50.756977 129.654011,51.0369155 129.915986,51.156 C130.000231,51.1952988 130.092026,51.2160348 130.184986,51.2160348 L134.875986,51.2160348 C135.219509,51.2194242 135.513223,50.9696175 135.564986,50.63 L136.727986,43.265 C136.778939,42.9249317 137.073149,42.6747042 137.416986,42.679 L141.671986,42.672 L141.671986,42.672 Z M145.596986,33.886 C145.306986,35.722 143.887986,37.075 141.170986,37.075 L137.697986,37.075 L138.751986,30.395 L142.162986,30.395 C144.970986,30.401 145.885986,32.058 145.596986,33.891 L145.596986,33.886 Z M171.973986,32.706 L167.525986,32.706 C167.18279,32.702503 166.889196,32.9517804 166.836986,33.291 L166.690986,34.215 C166.690986,34.215 163.234986,30.44 157.116986,32.99 C153.607986,34.451 151.922986,37.47 151.205986,39.68 C151.205986,39.68 148.929986,46.398 154.075986,50.097 C154.075986,50.097 158.847986,53.653 164.221986,49.877 L164.128986,50.466 C164.082409,50.749977 164.232011,51.0299155 164.493986,51.149 C164.577986,51.189 164.669986,51.209 164.762986,51.209 L169.213986,51.209 C169.55814,51.2141761 169.852851,50.9635224 169.902986,50.623 L172.611986,33.448 C172.638967,33.2621157 172.585098,33.073572 172.463986,32.93 C172.342253,32.7859662 172.162559,32.7038202 171.973986,32.706 L171.973986,32.706 Z M165.427986,42.198 C165.071797,44.6751772 162.934454,46.5044962 160.431986,46.474 C159.957778,46.4795969 159.485652,46.4104146 159.032986,46.269 C157.111986,45.653 156.015986,43.807 156.330986,41.807 C156.69083,39.3316868 158.825789,37.5039809 161.326986,37.53 C161.801986,37.525 162.273986,37.594 162.725986,37.736 C164.658986,38.35 165.749986,40.196 165.432986,42.198 L165.427986,42.198 L165.427986,42.198 Z"></path><path fill="#003087" fill-rule="nonzero" d="M124.204986,33.131 L118.837986,42.19 L116.114986,33.198 C116.0272,32.9049326 115.756916,32.7046623 115.450986,32.7059048 L110.608986,32.7059048 C110.439552,32.7027489 110.279321,32.782901 110.180312,32.9204358 C110.081303,33.0579706 110.056138,33.2353538 110.112986,33.395 L114.992986,48.541 L110.579986,55.679 C110.47841,55.8390534 110.472572,56.0418621 110.564775,56.2074929 C110.656977,56.3731236 110.832432,56.4750118 111.021986,56.4730293 L116.238986,56.4730293 C116.542538,56.474558 116.82432,56.3156042 116.979986,56.055 L130.611986,33.503 C130.711981,33.342671 130.716344,33.140509 130.62336,32.9760149 C130.530376,32.8115209 130.354918,32.7110068 130.165986,32.714 L124.950986,32.714 C124.645859,32.7104527 124.361807,32.8692321 124.204986,33.131 L124.204986,33.131 Z"></path><path fill="#0070E0" fill-rule="nonzero" d="M176.981986,25.387 L173.019986,50.466 C172.973409,50.749977 173.123011,51.0299155 173.384986,51.149 C173.468986,51.189 173.560986,51.2090545 173.653986,51.2090545 L178.342986,51.2090545 C178.686824,51.2132958 178.981033,50.9630683 179.031986,50.623 L182.994986,25.544 C183.024923,25.3585697 182.971496,25.1693794 182.848986,25.027 C182.726794,24.884583 182.548638,24.8024412 182.360986,24.8019637 L177.670986,24.8019637 C177.32779,24.798503 177.034196,25.0477804 176.981986,25.387 L176.981986,25.387 Z"></path><path fill="#001C64" fill-rule="nonzero" d="M52.1459861,36.26 C51.1399861,41.995 46.4609861,46.33 40.3209861,46.33 L36.4229861,46.33 C35.6279861,46.33 34.8269861,47.066 34.6999861,47.88 L32.9929861,58.715 C32.8939861,59.332 32.6049861,59.537 31.9799861,59.537 L25.7099861,59.537 C25.0759861,59.537 24.9259861,59.325 25.0209861,58.7 L25.7409861,51.207 L18.2149861,50.818 C17.5819861,50.818 17.3529861,50.473 17.4429861,49.841 L22.5779861,17.281 C22.6769861,16.664 23.0609861,16.399 23.6839861,16.399 L36.7069861,16.399 C42.9759861,16.399 46.9419861,20.619 47.4269861,26.091 C51.1569861,28.611 52.9009861,31.964 52.1469861,36.259 L52.1459861,36.26 Z"></path><path fill="#0070E0" fill-rule="nonzero" d="M27.6489861,39.075 L25.7419861,51.208 L24.5359861,58.82 C24.4906594,59.1169601 24.5767174,59.4189524 24.7717717,59.6474116 C24.966826,59.8758708 25.251592,60.0082099 25.5519861,60.01 L32.1739861,60.01 C32.7983903,60.009277 33.3296384,59.5547695 33.4269861,58.938 L35.1699861,47.878 C35.2677748,47.2616278 35.7989052,46.8076449 36.4229861,46.807 L40.3209861,46.807 C46.4576721,46.7989853 51.6748171,42.3239341 52.6169861,36.26 C53.2919861,31.953 51.1249861,28.032 47.4159861,26.095 C47.4075991,26.553886 47.3675035,27.0116436 47.2959861,27.465 C46.3503859,33.5255611 41.1348666,37.9966122 35.0009861,38.005 L28.9009861,38.005 C28.2772974,38.0052192 27.7463759,38.458962 27.6489861,39.075 L27.6489861,39.075 Z"></path><path fill="#003087" fill-rule="nonzero" d="M25.7409861,51.208 L18.0299861,51.208 C17.7289507,51.2065396 17.4434681,51.0740843 17.2479661,50.8451664 C17.0524641,50.6162485 16.9663177,50.3135548 17.0119861,50.016 L22.2079861,17.072 C22.3044922,16.4551673 22.8356497,16.0003743 23.4599861,16 L36.6999861,16 C42.9689861,16 47.5269861,20.562 47.4199861,26.089 C45.7514407,25.2281854 43.8984322,24.7864699 42.0209861,24.802 L30.9829861,24.802 C30.3585265,24.8021535 29.8268345,25.2562541 29.7289861,25.873 L27.6489861,39.075 L25.7409861,51.208 Z"></path></g></svg>
\ No newline at end of file
diff --git a/docs/assets/img/tactile_noise.webp b/docs/assets/img/tactile_noise.webp
new file mode 100644
index 000000000..08b8f681c
Binary files /dev/null and b/docs/assets/img/tactile_noise.webp differ
diff --git a/docs/assets/img/wechat.jpg b/docs/assets/img/wechat.jpg
new file mode 100644
index 000000000..58c8c5115
Binary files /dev/null and b/docs/assets/img/wechat.jpg differ
diff --git a/docs/donate.html b/docs/donate.html
deleted file mode 100644
index c2ee805a8..000000000
--- a/docs/donate.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>捐助 Artplayer.js</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-    <meta name="keywords" content="artplayer, player, js, html5, video" />
-    <meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
-    <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
-    <link rel="stylesheet" href="./assets/css/normalize.css" />
-    <style>
-        body {
-            height: 100%;
-            color: #ccc;
-            background: rgb(16, 17, 19);
-        }
-    </style>
-</head>
-
-<body>
-    Donate
-</body>
-
-</html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 308d389a4..ed2f52c8c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -92,7 +92,7 @@
             </div>
             <a class="item" href="./document/">Document</a>
             <a class="item" href="https://github.com/zhw2590582/ArtPlayer">Github</a>
-            <a class="item" href="./donate.html">☕ 捐助</a>
+            <a class="item" href="./sponsor.html">☕ 捐助</a>
             <span class="item" href="#">Q群: 320881312</span>
         </div>
         <div class="tool">
diff --git a/docs/sponsor.html b/docs/sponsor.html
new file mode 100644
index 000000000..7757ffce7
--- /dev/null
+++ b/docs/sponsor.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>捐助 Artplayer.js</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="keywords" content="artplayer, player, js, html5, video" />
+    <meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
+    <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="./assets/css/normalize.css" />
+    <style>
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #333;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: #666;
+        }
+
+        html,
+        body {
+            height: 100%;
+        }
+
+        body {
+            color: #fff;
+            line-height: 1.5;
+            font-size: 14px;
+            background-color: #000;
+            background-image: url(./assets/img/tactile_noise.webp);
+            font-family: 'Helvetica Neue', 'Luxi Sans', 'Segoe UI', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif, 'Apple Logo';
+        }
+
+        .main {
+            min-height: 100%;
+            display: flex;
+            flex-direction: column;
+            width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            border-left: 1px solid rgb(226 226 226 / 10%);
+            border-right: 1px solid rgb(226 226 226 / 10%);
+            box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
+            background-color: rgb(0 0 0 / 20%);
+        }
+
+        .title {
+            text-align: center;
+            font-size: 20px;
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgb(226 226 226 / 10%);
+        }
+
+        .pay {
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgb(226 226 226 / 10%);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="title">
+            捐助 Artplayer.js
+            <div>Donate to Artplayer.js</div>
+        </div>
+        <div class="pay">
+            <img src="./assets/img/wechat.jpg" height="280" />
+            <img src="./assets/img/alipay.jpg" height="280" />
+            <a href="https://paypal.me/harveyzack" style="height: 60px">
+                <img src="./assets/img/paypal.svg" height="60" />
+            </a>
+        </div>
+        <div style="margin-bottom: 20px;">
+            感谢以下捐助者的支持！
+            <div>Thank you for the support of the following sponsors!</div>
+        </div>
+        <table border="1">
+            <thead>
+                <tr>
+                    <th align="left">称呼(Name)</th>
+                    <th align="left">金额(Amount)</th>
+                    <th align="left">备注(Note)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+                <tr>
+                    <td>...</td>
+                    <td>...</td>
+                    <td>...</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</body>
+
+</html>
\ No newline at end of file