diff --git a/packages/artplayer-document/docs/zh-cn/Events.mdx b/packages/artplayer-document/docs/zh-cn/Events.mdx index e4e8e323d..53d9213a0 100644 --- a/packages/artplayer-document/docs/zh-cn/Events.mdx +++ b/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) => { }); ``` -| 事件名字 | 触发时间 | -| ------------------ | ------------------------------------ | -| `aspectRatio` | When aspect ratio change | -| `url` | When the video url change | -| `autoSize` | When the player auto size change | -| `flip` | When the player flip change | -| `fullscreen` | When the full screen change | -| `fullscreenWeb` | When the web full screen change | -| `fullscreenRotate` | When the rotate full screen change | -| `pip` | When the picture in picture change | -| `mini` | When the mini player change | -| `playbackRate` | When playback rate change | -| `screenshot` | When a screenshot | -| `switch` | When switching video url | -| `loop` | When the interval loop change | -| `subtitleUpdate` | When the subtitles change | -| `subtitleSwitch` | When switching subtitles | -| `subtitleLoad` | When the subtitles loaded | -| `subtitle` | When displaying subtitles | -| `notice` | When displaying notice | -| `mask` | When displaying mask | -| `loading` | When displaying loading | -| `layer` | When displaying layer | -| `info` | When displaying info | -| `setting` | When displaying setting | -| `contextmenu` | When displaying contextmenu | -| `control` | When displaying control | -| `hotkey` | When the hotkey is triggered | +### url + +在视频地址变化时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('url', (...args) => { + console.info(args); +}); + +art.on('ready', (...args) => { + art.url = '/assets/sample/video.mp4?t=0'; +}); +``` + +### fullscreen + +在播放器窗口全屏时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, +}); + +art.on('fullscreen', (...args) => { + console.info(args); +}); +``` + +### fullscreenWeb + +在播放器网页全屏时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, +}); + +art.on('fullscreenWeb', (...args) => { + console.info(args); +}); +``` + +### hotkey + +在快捷键被使用时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('hotkey', (...args) => { + console.info(args); +}); +``` diff --git a/packages/artplayer-document/docs/zh-cn/Libraries.md b/packages/artplayer-document/docs/zh-cn/Libraries.md index 472b9d0f3..cc4534bf4 100644 --- a/packages/artplayer-document/docs/zh-cn/Libraries.md +++ b/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) + +
▶ Run Code
+ +```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) + +
▶ Run Code
+ +```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) + +
▶ Run Code
+ +```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) + +
▶ Run Code
+ +```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) + +
▶ Run Code
+ +```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; +}); +``` diff --git a/packages/artplayer/src/player/fullscreenRotateMix.js b/packages/artplayer/src/player/fullscreenRotateMix.js deleted file mode 100644 index 71c7f3d2f..000000000 --- a/packages/artplayer/src/player/fullscreenRotateMix.js +++ /dev/null @@ -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; - } - }, - }); -} diff --git a/packages/artplayer/src/player/index.js b/packages/artplayer/src/player/index.js index df76c762b..0438f0464 100644 --- a/packages/artplayer/src/player/index.js +++ b/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);