mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 08:51:20 -08:00
update docs
This commit is contained in:
1 parent
2749d50209
commit
550aa0e7f2
95 files changed
+1734
-1828
No files matched your search
@@ -42,11 +42,4 @@ export default function aspectRatioMix(art) {
|
||||
art.emit('aspectRatio', ratio);
|
||||
},
|
||||
});
|
||||
|
||||
def(art, 'aspectRatioReset', {
|
||||
value() {
|
||||
const { aspectRatio } = art;
|
||||
art.aspectRatio = aspectRatio;
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,32 +1,17 @@
|
||||
import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
|
||||
import { setStyle, def } from '../utils';
|
||||
|
||||
export default function autoHeightMix(art) {
|
||||
const {
|
||||
option,
|
||||
template: { $container, $video },
|
||||
} = art;
|
||||
|
||||
const heightCache = $container.style.height;
|
||||
|
||||
def(art, 'autoHeight', {
|
||||
get() {
|
||||
return hasClass($container, 'art-auto-height');
|
||||
},
|
||||
set(value) {
|
||||
if (value) {
|
||||
const { clientWidth } = $container;
|
||||
const { videoHeight, videoWidth } = $video;
|
||||
const height = videoHeight * (clientWidth / videoWidth);
|
||||
setStyle($container, 'height', height + 'px');
|
||||
addClass($container, 'art-auto-height');
|
||||
art.autoSize = option.autoSize;
|
||||
art.emit('autoHeight', height);
|
||||
} else {
|
||||
setStyle($container, 'height', heightCache);
|
||||
removeClass($container, 'art-auto-height');
|
||||
art.autoSize = option.autoSize;
|
||||
art.emit('autoHeight');
|
||||
}
|
||||
value() {
|
||||
const { clientWidth } = $container;
|
||||
const { videoHeight, videoWidth } = $video;
|
||||
const height = videoHeight * (clientWidth / videoWidth);
|
||||
setStyle($container, 'height', height + 'px');
|
||||
art.emit('autoHeight', height);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,38 +1,27 @@
|
||||
import { setStyle, addClass, removeClass, hasClass, def } from '../utils';
|
||||
import { setStyle, def } from '../utils';
|
||||
|
||||
export default function resizeMix(art) {
|
||||
const { $container, $player, $video } = art.template;
|
||||
|
||||
def(art, 'autoSize', {
|
||||
get() {
|
||||
return hasClass($container, 'art-auto-size');
|
||||
},
|
||||
set(value) {
|
||||
if (value) {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { width, height } = $container.getBoundingClientRect();
|
||||
const videoRatio = videoWidth / videoHeight;
|
||||
const containerRatio = width / height;
|
||||
addClass($container, 'art-auto-size');
|
||||
if (containerRatio > videoRatio) {
|
||||
const percentage = ((height * videoRatio) / width) * 100;
|
||||
setStyle($player, 'width', `${percentage}%`);
|
||||
setStyle($player, 'height', '100%');
|
||||
} else {
|
||||
const percentage = (width / videoRatio / height) * 100;
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', `${percentage}%`);
|
||||
}
|
||||
art.emit('autoSize', {
|
||||
width: art.width,
|
||||
height: art.height,
|
||||
});
|
||||
value() {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { width, height } = $container.getBoundingClientRect();
|
||||
const videoRatio = videoWidth / videoHeight;
|
||||
const containerRatio = width / height;
|
||||
if (containerRatio > videoRatio) {
|
||||
const percentage = ((height * videoRatio) / width) * 100;
|
||||
setStyle($player, 'width', `${percentage}%`);
|
||||
setStyle($player, 'height', '100%');
|
||||
} else {
|
||||
removeClass($container, 'art-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
setStyle($player, 'height', null);
|
||||
art.emit('autoSize');
|
||||
const percentage = (width / videoRatio / height) * 100;
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', `${percentage}%`);
|
||||
}
|
||||
art.emit('autoSize', {
|
||||
width: art.width,
|
||||
height: art.height,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -83,7 +83,7 @@ export default function eventInit(art) {
|
||||
// });
|
||||
|
||||
art.on('video:loadedmetadata', () => {
|
||||
art.autoSize = option.autoSize;
|
||||
art.emit('resize');
|
||||
if (isMobile) {
|
||||
art.loading.show = false;
|
||||
art.controls.show = true;
|
||||
|
||||
@@ -20,15 +20,11 @@ export default function fullscreenMix(art) {
|
||||
async set(value) {
|
||||
if (value) {
|
||||
art.state = 'fullscreen';
|
||||
art.aspectRatioReset();
|
||||
art.autoSize = false;
|
||||
await screenfull.request($player);
|
||||
addClass($player, 'art-fullscreen');
|
||||
art.emit('resize');
|
||||
notice.show = '';
|
||||
} else {
|
||||
art.aspectRatioReset();
|
||||
art.autoSize = art.option.autoSize;
|
||||
await screenfull.exit();
|
||||
removeClass($player, 'art-fullscreen');
|
||||
art.emit('resize');
|
||||
|
||||
@@ -2,7 +2,6 @@ import { addClass, removeClass, hasClass, def, append } from '../utils';
|
||||
|
||||
export default function fullscreenWebMix(art) {
|
||||
const {
|
||||
option,
|
||||
notice,
|
||||
constructor,
|
||||
template: { $container, $player },
|
||||
@@ -21,8 +20,6 @@ export default function fullscreenWebMix(art) {
|
||||
}
|
||||
art.state = 'fullscreenWeb';
|
||||
addClass($player, 'art-fullscreen-web');
|
||||
art.aspectRatioReset();
|
||||
art.autoSize = false;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWeb', true);
|
||||
notice.show = '';
|
||||
@@ -35,8 +32,6 @@ export default function fullscreenWebMix(art) {
|
||||
cssText = '';
|
||||
}
|
||||
removeClass($player, 'art-fullscreen-web');
|
||||
art.aspectRatioReset();
|
||||
art.autoSize = option.autoSize;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWeb', false);
|
||||
notice.show = '';
|
||||
|
||||
Reference in new issue
Block a user