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

优化画面调整

Browse Source
This commit is contained in:
Harvey committed 2020-09-15 16:52:01 +08:00
1 parent 5cbb8bd1f3
commit 7e4420d841
5 files changed
+119 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer.js
+59 -59
View File
@@ -1529,46 +1529,41 @@
return $player.dataset.aspectRatio || '';
},
set: function set(ratio) {
if (ratio) {
var ratioList = ['default', '4:3', '16:9'];
errorHandle(ratioList.includes(ratio), "'aspectRatio' only accept ".concat(ratioList.toString(), " as parameters"));
player.rotate = 0;
var ratioList = [false, 'default', '4:3', '16:9'];
errorHandle(ratioList.includes(ratio), "'aspectRatio' only accept ".concat(ratioList.toString(), " as parameters"));
if (ratio === 'default') {
player.aspectRatio = false;
} else {
var ratioArray = ratio.split(':');
var videoWidth = $video.videoWidth,
videoHeight = $video.videoHeight;
var clientWidth = $player.clientWidth,
clientHeight = $player.clientHeight;
var videoRatio = videoWidth / videoHeight;
var setupRatio = ratioArray[0] / ratioArray[1];
if (videoRatio > setupRatio) {
var percentage = setupRatio * videoHeight / videoWidth;
setStyle($video, 'width', "".concat(percentage * 100, "%"));
setStyle($video, 'height', '100%');
setStyle($video, 'padding', "0 ".concat((clientWidth - clientWidth * percentage) / 2, "px"));
} else {
var _percentage = videoWidth / setupRatio / videoHeight;
setStyle($video, 'width', '100%');
setStyle($video, 'height', "".concat(_percentage * 100, "%"));
setStyle($video, 'padding', "".concat((clientHeight - clientHeight * _percentage) / 2, "px 0"));
}
}
$player.dataset.aspectRatio = ratio;
notice.show = "".concat(i18n.get('Aspect ratio'), ": ").concat(ratio === 'default' ? i18n.get('Default') : ratio);
art.emit('aspectRatio', ratio);
} else if (player.aspectRatio) {
if (!ratio || ratio === 'default') {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.aspectRatio;
art.emit('aspectRatio', 'default');
} else {
var ratioArray = ratio.split(':');
var videoWidth = $video.videoWidth,
videoHeight = $video.videoHeight;
var clientWidth = $player.clientWidth,
clientHeight = $player.clientHeight;
var videoRatio = videoWidth / videoHeight;
var setupRatio = ratioArray[0] / ratioArray[1];
if (videoRatio > setupRatio) {
var percentage = setupRatio * videoHeight / videoWidth;
setStyle($video, 'width', "".concat(percentage * 100, "%"));
setStyle($video, 'height', '100%');
setStyle($video, 'padding', "0 ".concat((clientWidth - clientWidth * percentage) / 2, "px"));
} else {
var _percentage = videoWidth / setupRatio / videoHeight;
setStyle($video, 'width', '100%');
setStyle($video, 'height', "".concat(_percentage * 100, "%"));
setStyle($video, 'padding', "".concat((clientHeight - clientHeight * _percentage) / 2, "px 0"));
}
$player.dataset.aspectRatio = ratio;
}
notice.show = "".concat(i18n.get('Aspect ratio'), ": ").concat(ratio === 'default' ? i18n.get('Default') : ratio);
art.emit('aspectRatio', ratio);
}
});
def(player, 'aspectRatioReset', {
@@ -2107,26 +2102,33 @@
}
function flipMix(art, player) {
var $player = art.template.$player;
var $player = art.template.$player,
i18n = art.i18n,
notice = art.notice;
def(player, 'flip', {
get: function get() {
return $player.dataset.flip;
},
set: function set(flip) {
if (flip) {
var flipList = ['normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
player.rotate = 0;
var flipList = [false, 'normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
if (flip === 'normal') {
player.flip = false;
} else {
$player.dataset.flip = flip;
art.emit('flip', flip);
}
} else {
if (!flip || flip === 'normal') {
delete $player.dataset.flip;
art.emit('flip', 'normal');
} else {
$player.dataset.flip = flip;
}
var word = flip.replace(flip[0], flip[0].toUpperCase());
notice.show = "".concat(i18n.get('Flip'), ": ").concat(i18n.get(word));
art.emit('flip', flip);
}
});
def(player, 'flipReset', {
set: function set(value) {
if (value && player.flip) {
var flip = player.flip;
player.flip = flip;
}
}
});
@@ -2291,26 +2293,24 @@
return Number($player.dataset.rotate) || 0;
},
set: function set(deg) {
var degList = [-270, -180, -90, 0, 90, 180, 270];
var degList = [false, -270, -180, -90, 0, 90, 180, 270];
errorHandle(degList.includes(deg), "'rotate' only accept ".concat(degList.toString(), " as parameters"));
player.flip = false;
player.aspectRatio = false;
notice.show = "".concat(i18n.get('Rotate'), ": ").concat(deg, "\xB0");
if (deg) {
if (!deg) {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.rotate;
} else {
var videoWidth = $video.videoWidth,
videoHeight = $video.videoHeight;
var clientWidth = $player.clientWidth,
clientHeight = $player.clientHeight;
$player.dataset.rotate = deg;
art.emit('rotate', deg);
} else {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.rotate;
art.emit('rotate', 0);
}
notice.show = "".concat(i18n.get('Rotate'), ": ").concat(deg, "\xB0");
art.emit('rotate', deg);
}
});
def(player, 'rotateReset', {
docs/uncompiled/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/superPropBase.js","../../node_modules/_@babel_runtime@7.11.2@@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","..Line truncated
packages/artplayer/src/player/aspectRatioMix.js
+24 -33
View File
@@ -12,45 +12,36 @@ export default function aspectRatioMix(art, player) {
return $player.dataset.aspectRatio || '';
},
set(ratio) {
if (ratio) {
const ratioList = ['default', '4:3', '16:9'];
errorHandle(
ratioList.includes(ratio),
`'aspectRatio' only accept ${ratioList.toString()} as parameters`,
);
const ratioList = [false, 'default', '4:3', '16:9'];
errorHandle(ratioList.includes(ratio), `'aspectRatio' only accept ${ratioList.toString()} as parameters`);
player.rotate = 0;
if (ratio === 'default') {
player.aspectRatio = false;
} else {
const ratioArray = ratio.split(':');
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
const setupRatio = ratioArray[0] / ratioArray[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`);
}
}
$player.dataset.aspectRatio = ratio;
notice.show = `${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`;
art.emit('aspectRatio', ratio);
} else if (player.aspectRatio) {
if (!ratio || ratio === 'default') {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.aspectRatio;
art.emit('aspectRatio', 'default');
} else {
const ratioArray = ratio.split(':');
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
const setupRatio = ratioArray[0] / ratioArray[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`);
}
$player.dataset.aspectRatio = ratio;
}
notice.show = `${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`;
art.emit('aspectRatio', ratio);
},
});
packages/artplayer/src/player/flipMix.js
+25 -13
View File
@@ -1,25 +1,37 @@
import { errorHandle, def } from '../utils';
export default function flipMix(art, player) {
const { $player } = art.template;
const {
template: { $player },
i18n,
notice,
} = art;
def(player, 'flip', {
get() {
return $player.dataset.flip;
},
set(flip) {
if (flip) {
const flipList = ['normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
player.rotate = 0;
if (flip === 'normal') {
player.flip = false;
} else {
$player.dataset.flip = flip;
art.emit('flip', flip);
}
} else {
const flipList = [false, 'normal', 'horizontal', 'vertical'];
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
if (!flip || flip === 'normal') {
delete $player.dataset.flip;
art.emit('flip', 'normal');
} else {
$player.dataset.flip = flip;
}
const word = flip.replace(flip[0], flip[0].toUpperCase());
notice.show = `${i18n.get('Flip')}: ${i18n.get(word)}`;
art.emit('flip', flip);
},
});
def(player, 'flipReset', {
set(value) {
if (value && player.flip) {
const { flip } = player;
player.flip = flip;
}
},
});
packages/artplayer/src/player/rotateMix.js
+10 -13
View File
@@ -10,26 +10,23 @@ export default function rotateMix(art, player) {
def(player, 'rotate', {
get: () => Number($player.dataset.rotate) || 0,
set: (deg) => {
const degList = [-270, -180, -90, 0, 90, 180, 270];
const degList = [false, -270, -180, -90, 0, 90, 180, 270];
errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
player.flip = false;
player.aspectRatio = false;
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
if (deg) {
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const degFormat = deg < 0 ? deg + 360 : deg;
$player.dataset.rotate = deg;
art.emit('rotate', deg);
} else {
if (!deg) {
setStyle($video, 'width', null);
setStyle($video, 'height', null);
setStyle($video, 'padding', null);
delete $player.dataset.rotate;
art.emit('rotate', 0);
} else {
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const degFormat = deg < 0 ? deg + 360 : deg;
$player.dataset.rotate = deg;
}
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
art.emit('rotate', deg);
},
});