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

格式化

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-21 19:45:44 +08:00
1 parent 0454f785be
commit 203ad0d3a0
75 files changed
+3120 -2904
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/player/aspectRatioMix.js
+55 -51
View File
@@ -1,63 +1,67 @@
import { setStyle } from '../utils';
export default function aspectRatioMix(art, player) {
const { refs: { $video, $player }, i18n, notice } = art;
const {
refs: { $video, $player },
i18n,
notice,
} = art;
Object.defineProperty(player, 'aspectRatioState', {
get: () => $player.dataset.aspectRatio
});
Object.defineProperty(player, 'aspectRatioState', {
get: () => $player.dataset.aspectRatio,
});
Object.defineProperty(player, 'aspectRatio', {
value: ratio => {
const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
Object.defineProperty(player, 'aspectRatio', {
value: ratio => {
const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
if (ratio.length === 2) {
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
const setupRatio = Number(ratio[0]) / Number(ratio[1]);
if (ratio.length === 2) {
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
const setupRatio = Number(ratio[0]) / Number(ratio[1]);
if (videoRatio > setupRatio) {
const percentage = setupRatio * videoHeight / videoWidth;
setStyle($video, 'width', `${percentage * 100}%`);
setStyle($video, 'height', '100%');
setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
} else {
const percentage = videoWidth / setupRatio / videoHeight;
setStyle($video, 'width', '100%');
setStyle($video, 'height', `${percentage * 100}%`);
setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
}
if (videoRatio > setupRatio) {
const percentage = (setupRatio * videoHeight) / videoWidth;
setStyle($video, 'width', `${percentage * 100}%`);
setStyle($video, 'height', '100%');
setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
} else {
const percentage = videoWidth / setupRatio / videoHeight;
setStyle($video, 'width', '100%');
setStyle($video, 'height', `${percentage * 100}%`);
setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
}
$player.dataset.aspectRatio = ratioName;
} else {
player.aspectRatioRemove();
}
$player.dataset.aspectRatio = ratioName;
} else {
player.aspectRatioRemove();
}
notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
art.emit('aspectRatioChange', ratio);
}
});
notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
art.emit('aspectRatioChange', ratio);
},
});
Object.defineProperty(player, 'aspectRatioRemove', {
value: () => {
if (player.aspectRatioState) {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.aspectRatio;
art.emit('aspectRatioRemove');
}
}
});
Object.defineProperty(player, 'aspectRatioRemove', {
value: () => {
if (player.aspectRatioState) {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.aspectRatio;
art.emit('aspectRatioRemove');
}
},
});
Object.defineProperty(player, 'aspectRatioReset', {
value: () => {
const { aspectRatio } = $player.dataset;
if (aspectRatio) {
player.aspectRatio(aspectRatio.split(':'));
art.emit('aspectRatioReset');
}
}
});
Object.defineProperty(player, 'aspectRatioReset', {
value: () => {
const { aspectRatio } = $player.dataset;
if (aspectRatio) {
player.aspectRatio(aspectRatio.split(':'));
art.emit('aspectRatioReset');
}
},
});
}