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

Aspect ratio (#534)

Browse Source 
* update

* update

* Create video2.mp4

* add art.quality

* fix art.theme
This commit is contained in:
Harvey Zack authored and GitHub committed 2023-05-13 21:23:05 +08:00
1 parent 1beff2c7fa
commit 4902322808
233 files changed
+2405 -2182
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/player/aspectRatioMix.js
+11 -10
View File
@@ -1,4 +1,4 @@
import { setStyle, def } from '../utils';
import { setStyle, def, clamp } from '../utils';
export default function aspectRatioMix(art) {
const {
@@ -20,21 +20,22 @@ export default function aspectRatioMix(art) {
delete $player.dataset.aspectRatio;
} else {
const ratioArray = ratio.split(':').map(Number);
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
const playerRatio = clientWidth / clientHeight;
const setupRatio = ratioArray[0] / ratioArray[1];
if (videoRatio > setupRatio) {
const percentage = (setupRatio * videoHeight) / videoWidth;
setStyle($video, 'width', `${percentage * 100}%`);
if (playerRatio > setupRatio) {
const width = clamp(setupRatio * clientHeight, 0, clientWidth);
setStyle($video, 'width', `${width}px`);
setStyle($video, 'height', '100%');
setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
setStyle($video, 'padding', `0 ${(clientWidth - width) / 2}px`);
} else {
const percentage = videoWidth / setupRatio / videoHeight;
const height = clamp(clientWidth / setupRatio, 0, clientHeight);
setStyle($video, 'width', '100%');
setStyle($video, 'height', `${percentage * 100}%`);
setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
setStyle($video, 'height', `${height}px`);
setStyle($video, 'padding', `${(clientHeight - height) / 2}px 0`);
}
$player.dataset.aspectRatio = ratio;
}