update

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

@@ -228,7 +228,6 @@ art.on('resize', (...args) => {
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
-    autoSize: true,
 });
 
 art.on('mousemove', (...args) => {
@@ -236,31 +235,76 @@ art.on('mousemove', (...args) => {
 });
 ```
 
-| 事件名字           | 触发时间                             |
+### url
-| ------------------ | ------------------------------------ |
+
-| `aspectRatio`      | When aspect ratio change             |
+在视频地址变化时触发
-| `url`              | When the video url change            |
+
-| `autoSize`         | When the player auto size change     |
+<div className="run-code">▶ Run Code</div>
-| `flip`             | When the player flip change          |
+
-| `fullscreen`       | When the full screen change          |
+```js
-| `fullscreenWeb`    | When the web full screen change      |
+var art = new Artplayer({
-| `fullscreenRotate` | When the rotate full screen change   |
+    container: '.artplayer-app',
-| `pip`              | When the picture in picture change   |
+    url: '/assets/sample/video.mp4',
-| `mini`             | When the mini player change          |
+});
-| `playbackRate`     | When playback rate change            |
+
-| `screenshot`       | When a screenshot                    |
+art.on('url', (...args) => {
-| `switch`           | When switching video url             |
+    console.info(args);
-| `loop`             | When the interval loop change        |
+});
-| `subtitleUpdate`   | When the subtitles change            |
+
-| `subtitleSwitch`   | When switching subtitles             |
+art.on('ready', (...args) => {
-| `subtitleLoad`     | When the subtitles loaded            |
+    art.url = '/assets/sample/video.mp4?t=0';
-| `subtitle`         | When displaying subtitles            |
+});
-| `notice`           | When displaying notice               |
+```
-| `mask`             | When displaying mask                 |
+
-| `loading`          | When displaying loading              |
+### fullscreen
-| `layer`            | When displaying layer                |
+
-| `info`             | When displaying info                 |
+在播放器窗口全屏时触发
-| `setting`          | When displaying setting              |
+
-| `contextmenu`      | When displaying contextmenu          |
+<div className="run-code">▶ Run Code</div>
-| `control`          | When displaying control              |
+
-| `hotkey`           | When the hotkey is triggered         |
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (...args) => {
+    console.info(args);
+});
+```
+
+### fullscreenWeb
+
+在播放器网页全屏时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (...args) => {
+    console.info(args);
+});
+```
+
+### hotkey
+
+在快捷键被使用时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (...args) => {
+    console.info(args);
+});
+```

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

@@ -3,3 +3,121 @@ title: 第三方库
 sidebar_position: 7
 slug: /zh-cn/libraries
 ---
+
+## flv.js
+
+-   主页: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
+
+<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    autoplay: true,
+    url: '/assets/sample/video.flv',
+    customType: {
+        flv: function (video, url) {
+            const flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                url: url,
+            });
+            flvPlayer.attachMediaElement(video);
+            flvPlayer.load();
+        },
+    },
+});
+```
+
+## hls.js
+
+-   主页: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
+
+<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/hls.js@1.1.1/dist/hls.min.js">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    autoplay: true,
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    customType: {
+        m3u8: function (video, url) {
+            var hls = new Hls();
+            hls.loadSource(url);
+            hls.attachMedia(video);
+        },
+    },
+});
+```
+
+## dash.js
+
+-   主页: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
+
+<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/dashjs@4.1.0/dist/dash.all.debug.min.js">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    autoplay: true,
+    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
+    customType: {
+        mpd: function (video, url) {
+            var player = dashjs.MediaPlayer().create();
+            player.initialize(video, url, true);
+        },
+    },
+});
+```
+
+## shaka-player
+
+-   主页: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
+
+<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/shaka-player@3.2.1/dist/shaka-player.compiled.min.js">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    autoplay: true,
+    url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
+    customType: {
+        mpd: function (video, url) {
+            shaka.polyfill.installAll();
+            var player = new shaka.Player(video);
+            player.load(url);
+        },
+    },
+});
+```
+
+## webtorrent
+
+-   主页: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
+
+<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/webtorrent@1.5.8/webtorrent.min.js">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    autoplay: true,
+    url:
+        'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
+    type: 'torrent',
+    customType: {
+        torrent: function (video, url, art) {
+            var client = new WebTorrent();
+            art.loading.show = true;
+            client.add(url, function (torrent) {
+                var file = torrent.files[0];
+                file.renderTo(video, {
+                    autoplay: true,
+                });
+            });
+        },
+    },
+});
+
+art.on('ready', () => {
+    art.template.$video.controls = false;
+});
+```

packages/artplayer/src/player/fullscreenRotateMix.js

@@ -1,42 +0,0 @@
-import { addClass, removeClass, hasClass, def, setStyle } from '../utils';
-
-export default function fullscreenRotateMix(art, player) {
-    const { $container, $player } = art.template;
-
-    def(player, 'fullscreenRotate', {
-        get() {
-            return hasClass($container, 'art-fullscreen-rotate');
-        },
-        set: (value) => {
-            if (value) {
-                addClass($container, 'art-fullscreen-rotate');
-                player.autoSize = true;
-                const { clientHeight: bodyHeight, clientWidth: bodyWidth } = document.body;
-                const { clientHeight: playerHeight, clientWidth: playerWidth } = $player;
-                const bodyRatio = bodyWidth / bodyHeight;
-                const videoRatio = playerWidth / playerHeight;
-                const needSpin = bodyRatio < videoRatio;
-                if (needSpin) {
-                    const scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
-                    setStyle($player, 'transform', `rotate(90deg) scale(${scale},${scale})`);
-                    art.emit('resize');
-                    art.emit('fullscreenRotate', true);
-                }
-            } else {
-                removeClass($container, 'art-fullscreen-rotate');
-                player.autoSize = art.option.autoSize;
-                setStyle($player, 'transform', null);
-                art.emit('resize');
-                art.emit('fullscreenRotate');
-            }
-        },
-    });
-
-    def(player, 'fullscreenRotateToggle', {
-        set(value) {
-            if (value) {
-                player.fullscreenRotate = !player.fullscreenRotate;
-            }
-        },
-    });
-}

packages/artplayer/src/player/index.js

@@ -15,7 +15,6 @@ import aspectRatioMix from './aspectRatioMix';
 import screenshotMix from './screenshotMix';
 import fullscreenMix from './fullscreenMix';
 import fullscreenWebMix from './fullscreenWebMix';
-import fullscreenRotateMix from './fullscreenRotateMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
@@ -48,7 +47,6 @@ export default class Player {
         screenshotMix(art, this);
         fullscreenMix(art, this);
         fullscreenWebMix(art, this);
-        fullscreenRotateMix(art, this);
         pipMix(art, this);
         loadedMix(art, this);
         playedMix(art, this);