mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
完成rotate
This commit is contained in:
Harvey committed
1 parent
e7380e84b8
commit
e4e79b63b4
9 files changed
+133
-77
No files matched your search
@@ -14,7 +14,7 @@ var art = new Artplayer({
|
||||
setting: true,
|
||||
loop: true,
|
||||
flip: true,
|
||||
rotate: false,
|
||||
rotate: true,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
fullscreen: true,
|
||||
|
||||
+39
-38
@@ -42,44 +42,45 @@ art.volume === art.player.volume;
|
||||
art.seek === art.player.seek;
|
||||
```
|
||||
|
||||
| propertie | type | Description |
|
||||
| ------------------------ | ---------- | ------------------------------------------------------------------------------------------------- |
|
||||
| `aspectRatio` | `String` | Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` and `false` |
|
||||
| `aspectRatioReset` | `Boolean` | Recalculate the aspect ratio |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `autoSize` | `Boolean` | Set auto size |
|
||||
| `currentTime` | `Number` | `Getter` and `Setter` of the current time |
|
||||
| `duration` | `Number` | `Getter` of the duration |
|
||||
| `flip` | `String` | Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` and `false` |
|
||||
| `fullscreen` | `Boolean` | Enable or disable fullscreen |
|
||||
| `fullscreenToggle` | `Boolean` | Toggle fullscreen |
|
||||
| `fullscreenWeb` | `Boolean` | Enable or disable web fullscreen |
|
||||
| `fullscreenWebToggle` | `Boolean` | Toggle web fullscreen |
|
||||
| `fullscreenRotate` | `Boolean` | Enable or disable web fullscreen on the mobile |
|
||||
| `fullscreenRotateToggle` | `Boolean` | Toggle web fullscreen on the mobile |
|
||||
| `loaded` | `Number` | Return the proportion of the load |
|
||||
| `pause` | `Boolean` | Pause playback |
|
||||
| `pip` | `Boolean` | Enable or disable pip |
|
||||
| `pipToggle` | `Boolean` | Toggle pip |
|
||||
| `mini` | `Boolean` | Enable or disable mini player |
|
||||
| `minToggle` | `Boolean` | Toggle mini player |
|
||||
| `playbackRate` | `String` | Set playbackRate, Currently only accepts three values：`0.5`, `0.75`, `1.0`, `1.25`, `1.5`, `2.0` |
|
||||
| `playbackRateReset` | `Boolean` | Recalculate the playback rate |
|
||||
| `played` | `Number` | Return the proportion of the played |
|
||||
| `playing` | `Boolean` | Return to playing state |
|
||||
| `play` | `Boolean` | Start playback |
|
||||
| `screenshot` | `Function` | Download a screenshot of current time |
|
||||
| `seek` | `Number` | Set the current time |
|
||||
| `forward` | `Number` | Video fast forward |
|
||||
| `backward` | `Number` | Video fast backward |
|
||||
| `switchQuality` | `Function` | Switch video quality |
|
||||
| `switchUrl` | `Function` | Switch video url |
|
||||
| `toggle` | `Boolean` | Toggle play and pause |
|
||||
| `volume` | `Number` | `Getter` and `Setter` of the current volume |
|
||||
| `muted` | `Boolean` | `Getter` and `Setter` of the muted |
|
||||
| `light` | `Boolean` | `Getter` and `Setter` of the light mode |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `loop` | `Arrary` | `Getter` and `Setter` of the interval loop |
|
||||
| propertie | type | Description |
|
||||
| ------------------------ | ---------- | ------------------------------------------------------------------------------------------- |
|
||||
| `aspectRatio` | `String` | Set aspect ratio, only accepts values：`default`, `4:3`, `16:9` and `false` |
|
||||
| `aspectRatioReset` | `Boolean` | Recalculate the aspect ratio |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `autoSize` | `Boolean` | Set auto size |
|
||||
| `currentTime` | `Number` | `Getter` and `Setter` of the current time |
|
||||
| `duration` | `Number` | `Getter` of the duration |
|
||||
| `flip` | `String` | Set flip, only accepts values：`normal`, `horizontal`, `vertical` and `false` |
|
||||
| `rotate` | `Number` | Set rotate, only accepts values：`-270`, `-180`, `-90`, `0`, `90`, `180`, `270` and `false` |
|
||||
| `fullscreen` | `Boolean` | Enable or disable fullscreen |
|
||||
| `fullscreenToggle` | `Boolean` | Toggle fullscreen |
|
||||
| `fullscreenWeb` | `Boolean` | Enable or disable web fullscreen |
|
||||
| `fullscreenWebToggle` | `Boolean` | Toggle web fullscreen |
|
||||
| `fullscreenRotate` | `Boolean` | Enable or disable web fullscreen on the mobile |
|
||||
| `fullscreenRotateToggle` | `Boolean` | Toggle web fullscreen on the mobile |
|
||||
| `loaded` | `Number` | Return the proportion of the load |
|
||||
| `pause` | `Boolean` | Pause playback |
|
||||
| `pip` | `Boolean` | Enable or disable pip |
|
||||
| `pipToggle` | `Boolean` | Toggle pip |
|
||||
| `mini` | `Boolean` | Enable or disable mini player |
|
||||
| `minToggle` | `Boolean` | Toggle mini player |
|
||||
| `playbackRate` | `String` | Set playbackRate, only accepts values：`0.5`, `0.75`, `1.0`, `1.25`, `1.5`, `2.0` |
|
||||
| `playbackRateReset` | `Boolean` | Recalculate the playback rate |
|
||||
| `played` | `Number` | Return the proportion of the played |
|
||||
| `playing` | `Boolean` | Return to playing state |
|
||||
| `play` | `Boolean` | Start playback |
|
||||
| `screenshot` | `Function` | Download a screenshot of current time |
|
||||
| `seek` | `Number` | Set the current time |
|
||||
| `forward` | `Number` | Video fast forward |
|
||||
| `backward` | `Number` | Video fast backward |
|
||||
| `switchQuality` | `Function` | Switch video quality |
|
||||
| `switchUrl` | `Function` | Switch video url |
|
||||
| `toggle` | `Boolean` | Toggle play and pause |
|
||||
| `volume` | `Number` | `Getter` and `Setter` of the current volume |
|
||||
| `muted` | `Boolean` | `Getter` and `Setter` of the muted |
|
||||
| `light` | `Boolean` | `Getter` and `Setter` of the light mode |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `loop` | `Arrary` | `Getter` and `Setter` of the interval loop |
|
||||
|
||||
[Run Code](/Properties.player)
|
||||
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
var css_248z = ".art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0 0;line-height:1}.art-video-player .art-bilingual p:nth-child(2){font-size:.6em}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.art-video-player .art-mask .art-state{right:30px;bottom:55px;width:60px;height:60px;opacity:.6}.art-video-player.art-mask-show .art-mask,.art-video-player .art-mask .art-state{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.art-video-player.art-loading-show .art-loading{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:55px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.art-video-player .art-bottom .art-progress{position:relative;pointer-events:auto}.art-video-player .art-bottom .art-progress .art-control-progress{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4px;cursor:pointer}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{position:relative;height:50%;width:100%;background:hsla(0,0%,100%,.2)}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;backLine truncated
|
||||
var css_248z = ".art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;background-color:#000;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0 0;line-height:1}.art-video-player .art-bilingual p:nth-child(2){font-size:.6em}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.art-video-player .art-mask .art-state{right:30px;bottom:55px;width:60px;height:60px;opacity:.6}.art-video-player.art-mask-show .art-mask,.art-video-player .art-mask .art-state{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.art-video-player.art-loading-show .art-loading{display:-webkit-box;display:-ms-flexbox;display:flex}.art-video-player .art-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:55px 10px 0;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.art-video-player .art-bottom .art-progress{position:relative;pointer-events:auto}.art-video-player .art-bottom .art-progress .art-control-progress{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:4px;cursor:pointer}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{position:relative;height:50%;width:100%;background:hsla(0,0%,100%,.2)}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;heLine truncated
|
||||
styleInject(css_248z);
|
||||
|
||||
var optionValidator = createCommonjsModule(function (module, exports) {
|
||||
@@ -2123,6 +2123,7 @@
|
||||
if (flip === 'normal') {
|
||||
delete $player.dataset.flip;
|
||||
} else {
|
||||
player.rotate = false;
|
||||
$player.dataset.flip = flip;
|
||||
}
|
||||
|
||||
@@ -2305,16 +2306,56 @@
|
||||
errorHandle(degList.includes(deg), "'rotate' only accept ".concat(degList.toString(), " as parameters"));
|
||||
|
||||
if (deg === 0) {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.rotate;
|
||||
setStyle($video, 'transform', null);
|
||||
} else {
|
||||
var videoWidth = $video.videoWidth,
|
||||
videoHeight = $video.videoHeight;
|
||||
var clientWidth = $player.clientWidth,
|
||||
clientHeight = $player.clientHeight;
|
||||
player.flip = false;
|
||||
$player.dataset.rotate = deg;
|
||||
|
||||
var getScaleValue = function getScaleValue() {
|
||||
var videoWidth = $video.clientWidth,
|
||||
videoHeight = $video.clientHeight;
|
||||
var playerWidth = $player.clientWidth,
|
||||
playerHeight = $player.clientHeight;
|
||||
var playerRatio = playerWidth / playerHeight;
|
||||
var videoRatio = videoWidth / videoHeight;
|
||||
return playerRatio > videoRatio ? playerWidth / videoHeight : playerHeight / videoWidth;
|
||||
};
|
||||
|
||||
var degValue = 0;
|
||||
var scaleValue = 1;
|
||||
|
||||
switch (deg) {
|
||||
case -270:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
|
||||
case -180:
|
||||
degValue = 180;
|
||||
break;
|
||||
|
||||
case -90:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
|
||||
case 90:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
|
||||
case 180:
|
||||
degValue = 180;
|
||||
break;
|
||||
|
||||
case 270:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
}
|
||||
|
||||
setStyle($video, 'transform', "rotate(".concat(degValue, "deg) scale(").concat(scaleValue, ")"));
|
||||
}
|
||||
|
||||
notice.show = "".concat(i18n.get('Rotate'), ": ").concat(deg, "\xB0");
|
||||
|
||||
@@ -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
|
||||
@@ -20,6 +20,7 @@ export default function flipMix(art, player) {
|
||||
if (flip === 'normal') {
|
||||
delete $player.dataset.flip;
|
||||
} else {
|
||||
player.rotate = false;
|
||||
$player.dataset.flip = flip;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,15 +16,50 @@ export default function rotateMix(art, player) {
|
||||
errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
|
||||
|
||||
if (deg === 0) {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.rotate;
|
||||
setStyle($video, 'transform', null);
|
||||
} else {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { clientWidth, clientHeight } = $player;
|
||||
const degFormat = deg < 0 ? deg + 360 : deg;
|
||||
player.flip = false;
|
||||
$player.dataset.rotate = deg;
|
||||
|
||||
const getScaleValue = () => {
|
||||
const { clientWidth: videoWidth, clientHeight: videoHeight } = $video;
|
||||
const { clientWidth: playerWidth, clientHeight: playerHeight } = $player;
|
||||
const playerRatio = playerWidth / playerHeight;
|
||||
const videoRatio = videoWidth / videoHeight;
|
||||
return playerRatio > videoRatio ? playerWidth / videoHeight : playerHeight / videoWidth;
|
||||
};
|
||||
|
||||
let degValue = 0;
|
||||
let scaleValue = 1;
|
||||
switch (deg) {
|
||||
case -270:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case -180:
|
||||
degValue = 180;
|
||||
break;
|
||||
case -90:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case 90:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case 180:
|
||||
degValue = 180;
|
||||
break;
|
||||
case 270:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setStyle($video, 'transform', `rotate(${degValue}deg) scale(${scaleValue})`);
|
||||
}
|
||||
|
||||
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
zoom: 1;
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
color: #eee;
|
||||
background-color: #000;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -17,6 +17,5 @@
|
||||
@import './mini.scss';
|
||||
@import './autoSize.scss';
|
||||
@import './flip.scss';
|
||||
@import './rotate.scss';
|
||||
@import './selector.scss';
|
||||
@import './balloon.scss';
|
||||
@@ -1,22 +0,0 @@
|
||||
.art-video-player {
|
||||
&[data-rotate='90'],
|
||||
&[data-rotate='-270'] {
|
||||
.art-video {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='180'],
|
||||
&[data-rotate='-180'] {
|
||||
.art-video {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-rotate='270'],
|
||||
&[data-rotate='-90'] {
|
||||
.art-video {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user