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

update docs

Browse Source
This commit is contained in:
Harvey Zack committed 2023-05-06 09:52:01 +08:00
1 parent 2749d50209
commit 550aa0e7f2
95 files changed
+1734 -1828
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/player/autoSizeMix.js
+17 -28
View File
@@ -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,
});
},
});
}