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

简化player接口

Browse Source
This commit is contained in:
Harvey Zack committed 2019-06-06 10:37:57 +08:00
1 parent 1b69b28ba1
commit 52b6693da2
41 files changed
+624 -690
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/player/autoSizeMix.js
+25 -28
View File
@@ -5,36 +5,33 @@ export default function resizeMix(art, player) {
template: { $container, $player, $video },
} = art;
Object.defineProperty(player, 'autoSizeState', {
get: () => $container.classList.contains('artplayer-auto-size'),
});
Object.defineProperty(player, 'autoSize', {
value: () => {
const { videoWidth, videoHeight } = $video;
const { width, height } = $container.getBoundingClientRect();
const videoRatio = videoWidth / videoHeight;
const containerRatio = width / height;
$container.classList.add('artplayer-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('autoSizeChange');
get() {
return $container.classList.contains('artplayer-auto-size');
},
});
Object.defineProperty(player, 'autoSizeRemove', {
value: () => {
$container.classList.remove('artplayer-auto-size');
setStyle($player, 'width', null);
setStyle($player, 'height', null);
art.emit('autoSizeRemove');
set(value) {
if (value) {
const { videoWidth, videoHeight } = $video;
const { width, height } = $container.getBoundingClientRect();
const videoRatio = videoWidth / videoHeight;
const containerRatio = width / height;
$container.classList.add('artplayer-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('autoSizeChange');
} else {
$container.classList.remove('artplayer-auto-size');
setStyle($player, 'width', null);
setStyle($player, 'height', null);
art.emit('autoSizeRemove');
}
},
});
}