feat: Add support for dynamic proxies in Artplayer

The code changes introduce new proxy options (`artplayer-proxy-webav` and `artplayer-proxy-libmedia`) in Artplayer, allowing for the use of third-party video and canvas proxies. This enhancement provides more flexibility in handling video playback and rendering, improving the overall performance and compatibility of Artplayer.

CHANGELOG_CN.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   新增 `option.proxy` 属性，用于代理第三方的 `video` 和 `canvas`
+-   新增 `artplayer-proxy-webav` 代理
+-   新增 `artplayer-proxy-libmedia` 代理
+
+## [5.1.7] - 2024-8-15
+
 -   新增 `Artplayer.STYLE` 属性，返回播放器样式文本
 -   `art.screenshot('your-name')` 截图功能支持自定义文件名字
 -   `Artplayer.CONTEXTMENU` 为 `false` 时，不再隐藏默认右键菜单

docs/assets/example/libmedia.js

@@ -1,3 +1,4 @@
+// From: https://github.com/zhaohappy/libmedia
 // npm i artplayer-proxy-libmedia
 // import artplayerProxyLibmedia from 'artplayer-proxy-libmedia';
 

docs/assets/example/webav.js

@@ -1,3 +1,4 @@
+// From: https://github.com/bilibili/WebAV
 // npm i artplayer-proxy-webav
 // import artplayerProxyWebAV from 'artplayer-proxy-webav';
 

docs/index.html

@@ -26,6 +26,29 @@
             <div class="item has-sub-menu">
                 Ecosystem
                 <div class="sub-menu">
+                    <ul>
+                        <li class="title">Library</li>
+                        <li style="display: inline-block;margin-right: 10px;">
+                            <a
+                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js&example=hls">hls.js</a>
+                        </li>
+                        <li style="display: inline-block;margin-right: 10px;">
+                            <a
+                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash">dash.js</a>
+                        </li>
+                        <li style="display: inline-block;margin-right: 10px;">
+                            <a
+                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv">flv.js</a>
+                        </li>
+                        <li style="display: inline-block;margin-right: 10px;">
+                            <a
+                                href="/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts">mpegts.js</a>
+                        </li>
+                        <li style="display: inline-block;margin-right: 10px;">
+                            <a
+                                href="/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent">webtorrent.js</a>
+                        </li>
+                    </ul>
                     <ul>
                         <li class="title">Plugins</li>
                         <li>
@@ -84,29 +107,6 @@
                                 href="/?libs=./uncompiled/artplayer-proxy-libmedia/index.js&example=libmedia">artplayer-proxy-libmedia</a>
                         </li>
                     </ul>
-                    <ul>
-                        <li class="title">Library</li>
-                        <li style="display: inline-block;margin-right: 10px;">
-                            <a
-                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js&example=hls">hls.js</a>
-                        </li>
-                        <li style="display: inline-block;margin-right: 10px;">
-                            <a
-                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash">dash.js</a>
-                        </li>
-                        <li style="display: inline-block;margin-right: 10px;">
-                            <a
-                                href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv">flv.js</a>
-                        </li>
-                        <li style="display: inline-block;margin-right: 10px;">
-                            <a
-                                href="/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts">mpegts.js</a>
-                        </li>
-                        <li style="display: inline-block;margin-right: 10px;">
-                            <a
-                                href="/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent">webtorrent.js</a>
-                        </li>
-                    </ul>
                     <ul>
                         <li class="title">Tools</li>
                         <li>