x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-16 17:46:17 -08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhw2590582 committed 2021-11-28 09:13:06 +08:00
1 parent d8e0a53b99
commit 00150073b9
4 files changed
+191 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-document/docs/zh-cn/Events.mdx
+73 -29
View File
@@ -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
在视频地址变化时触发
<div className="run-code">▶ Run Code</div>
```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
在播放器窗口全屏时触发
<div className="run-code">▶ Run Code</div>
```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
+118
View File
@@ -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
-42
View File
@@ -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
-2
View File
@@ -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);