mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 02:51:20 -08:00
优化移动端UI
This commit is contained in:
1 parent
beea013daf
commit
7b3913e318
13 files changed
+95
-54
No files matched your search
@@ -12,3 +12,7 @@ html, body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@@ -8,13 +8,13 @@ var art = new Artplayer({
|
|||||||
loop: true,
|
loop: true,
|
||||||
mutex: true,
|
mutex: true,
|
||||||
theme: '#ffad00',
|
theme: '#ffad00',
|
||||||
fullscreenWeb: true,
|
|
||||||
miniProgressBar: true,
|
miniProgressBar: true,
|
||||||
lang: navigator.language.toLowerCase(),
|
|
||||||
moreVideoAttr: {
|
moreVideoAttr: {
|
||||||
'webkit-playsinline': true,
|
|
||||||
playsInline: true,
|
playsInline: true,
|
||||||
crossOrigin: 'anonymous',
|
'webkit-playsinline': true,
|
||||||
|
'x5-video-player-type': 'h5',
|
||||||
|
'x5-video-player-fullscreen': false,
|
||||||
|
'x5-video-orientation': 'portraint',
|
||||||
},
|
},
|
||||||
subtitle: {
|
subtitle: {
|
||||||
url: url + '/subtitle/one-more-time-one-more-chance.srt',
|
url: url + '/subtitle/one-more-time-one-more-chance.srt',
|
||||||
@@ -42,9 +42,6 @@ var art = new Artplayer({
|
|||||||
state: '<img src="./assets/img/state.png">',
|
state: '<img src="./assets/img/state.png">',
|
||||||
},
|
},
|
||||||
whitelist: ['*'],
|
whitelist: ['*'],
|
||||||
// whitelist: ['iPhone'],
|
|
||||||
// whitelist: [(ua)=>{ return /iPhone OS 11/gi.test(ua); }],
|
|
||||||
// whitelist: [/iPhone OS 11/gi]
|
|
||||||
});
|
});
|
||||||
|
|
||||||
Artplayer.config.events.forEach(function (item) {
|
Artplayer.config.events.forEach(function (item) {
|
||||||
@@ -52,3 +49,7 @@ Artplayer.config.events.forEach(function (item) {
|
|||||||
console.log('video: ' + event.type);
|
console.log('video: ' + event.type);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (art.isWechat) {
|
||||||
|
document.querySelector('.tip').textContent = '微信环境需手动触发播放';
|
||||||
|
}
|
||||||
@@ -141,6 +141,8 @@ The current player uses the simplest native components on mobile devices, but yo
|
|||||||
|
|
||||||
By default, non-whitelisted devices only set video native properties and third-party dependencies.
|
By default, non-whitelisted devices only set video native properties and third-party dependencies.
|
||||||
|
|
||||||
|
`*` is a special value indicating that all mobile devices have the Artplayer UI enabled
|
||||||
|
|
||||||
[Open with mobile](https://artplayer.org/mobile.html)
|
[Open with mobile](https://artplayer.org/mobile.html)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -149,7 +151,8 @@ var art = new Artplayer({
|
|||||||
container: '.artplayer-app',
|
container: '.artplayer-app',
|
||||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||||
whitelist: ['iPhone OS 11'],
|
whitelist: ['iPhone OS 11'],
|
||||||
// whitelist: [(ua)=>{ return /iPhone OS 11/gi.test(ua); }],
|
// whitelist: ['*'],
|
||||||
|
// whitelist: [(ua) => /iPhone OS 11/gi.test(ua)],
|
||||||
// whitelist: [/iPhone OS 11/gi]
|
// whitelist: [/iPhone OS 11/gi]
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@@ -1011,7 +1014,7 @@ art.plugins.myPlugin.doSomething();
|
|||||||
| propertie | type | Description |
|
| propertie | type | Description |
|
||||||
| ----------- | ---------- | ------------------------------------------------ |
|
| ----------- | ---------- | ------------------------------------------------ |
|
||||||
| `isFocus` | `Boolean` | Return the focus state |
|
| `isFocus` | `Boolean` | Return the focus state |
|
||||||
| `ua` | `String` | The user agent |
|
| `userAgent` | `String` | The user agent |
|
||||||
| `isMobile` | `boolean` | Whether mobile access |
|
| `isMobile` | `boolean` | Whether mobile access |
|
||||||
| `isDestroy` | `Boolean` | Return the destroy state |
|
| `isDestroy` | `Boolean` | Return the destroy state |
|
||||||
| `option` | `Object` | Return the merge option |
|
| `option` | `Object` | Return the merge option |
|
||||||
@@ -1075,6 +1078,8 @@ art.seek === art.player.seek;
|
|||||||
| `play` | `Boolean` | Start playback |
|
| `play` | `Boolean` | Start playback |
|
||||||
| `screenshot` | `Function` | Download a screenshot of current time |
|
| `screenshot` | `Function` | Download a screenshot of current time |
|
||||||
| `seek` | `Number` | Set the current time |
|
| `seek` | `Number` | Set the current time |
|
||||||
|
| `forward` | `Number` | Video fast forward |
|
||||||
|
| `backward` | `Number` | Video fast backward |
|
||||||
| `switchQuality` | `Function` | Switch video quality |
|
| `switchQuality` | `Function` | Switch video quality |
|
||||||
| `switchUrl` | `Function` | Switch video url |
|
| `switchUrl` | `Function` | Switch video url |
|
||||||
| `toggle` | `Boolean` | Toggle play and pause |
|
| `toggle` | `Boolean` | Toggle play and pause |
|
||||||
|
|||||||
+3
-1
@@ -4,7 +4,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Artplayer.js</title>
|
<title>Artplayer.js</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<meta name="keywords" content="artplayer, player, js, html5, video" />
|
<meta name="keywords" content="artplayer, player, js, html5, video" />
|
||||||
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
|
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
|
||||||
@@ -16,6 +17,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="artplayer-app"></div>
|
<div class="artplayer-app"></div>
|
||||||
|
<p class="tip"></p>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
|
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
|
||||||
<script src="./uncompiled/artplayer.js"></script>
|
<script src="./uncompiled/artplayer.js"></script>
|
||||||
|
|||||||
@@ -281,6 +281,11 @@
|
|||||||
return Emitter;
|
return Emitter;
|
||||||
}();
|
}();
|
||||||
|
|
||||||
|
var userAgent = window.navigator.userAgent;
|
||||||
|
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
||||||
|
var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
|
||||||
|
var isWechat = /MicroMessenger/i.test(userAgent);
|
||||||
|
|
||||||
function query(selector) {
|
function query(selector) {
|
||||||
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
|
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
|
||||||
return parent.querySelector(selector);
|
return parent.querySelector(selector);
|
||||||
@@ -338,6 +343,7 @@
|
|||||||
}
|
}
|
||||||
function tooltip(target, msg) {
|
function tooltip(target, msg) {
|
||||||
var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up';
|
var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up';
|
||||||
|
if (isMobile) return;
|
||||||
target.setAttribute('aria-label', msg);
|
target.setAttribute('aria-label', msg);
|
||||||
target.setAttribute('data-balloon-pos', pos);
|
target.setAttribute('data-balloon-pos', pos);
|
||||||
}
|
}
|
||||||
@@ -685,14 +691,6 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var userAgent = window.navigator.userAgent;
|
|
||||||
function isMobile() {
|
|
||||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
|
||||||
}
|
|
||||||
function isSafari() {
|
|
||||||
return /^((?!chrome|android).)*safari/i.test(userAgent);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var utils = /*#__PURE__*/Object.freeze({
|
var utils = /*#__PURE__*/Object.freeze({
|
||||||
@@ -729,7 +727,8 @@
|
|||||||
escape: escape,
|
escape: escape,
|
||||||
userAgent: userAgent,
|
userAgent: userAgent,
|
||||||
isMobile: isMobile,
|
isMobile: isMobile,
|
||||||
isSafari: isSafari
|
isSafari: isSafari,
|
||||||
|
isWechat: isWechat
|
||||||
});
|
});
|
||||||
|
|
||||||
function validElement(value, type, paths) {
|
function validElement(value, type, paths) {
|
||||||
@@ -841,13 +840,13 @@
|
|||||||
this.state = !art.isMobile || whitelist.some(function (item) {
|
this.state = !art.isMobile || whitelist.some(function (item) {
|
||||||
switch (kindOf(item)) {
|
switch (kindOf(item)) {
|
||||||
case 'string':
|
case 'string':
|
||||||
return item === '*' || art.ua.indexOf(item) > -1;
|
return item === '*' || art.userAgent.indexOf(item) > -1;
|
||||||
|
|
||||||
case 'function':
|
case 'function':
|
||||||
return item(art.ua);
|
return item(art.userAgent);
|
||||||
|
|
||||||
case 'regexp':
|
case 'regexp':
|
||||||
return item.test(art.ua);
|
return item.test(art.userAgent);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return false;
|
return false;
|
||||||
@@ -928,6 +927,10 @@
|
|||||||
addClass(this.$info, 'art-backdrop-filter');
|
addClass(this.$info, 'art-backdrop-filter');
|
||||||
addClass(this.$contextmenu, 'art-backdrop-filter');
|
addClass(this.$contextmenu, 'art-backdrop-filter');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.art.isMobile) {
|
||||||
|
addClass(this.$container, 'art-mobile');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
key: "mobile",
|
key: "mobile",
|
||||||
@@ -1358,8 +1361,18 @@
|
|||||||
def(player, 'seek', {
|
def(player, 'seek', {
|
||||||
set: function set(time) {
|
set: function set(time) {
|
||||||
player.currentTime = time;
|
player.currentTime = time;
|
||||||
notice.show = "".concat(secondToTime(time), " / ").concat(secondToTime(player.duration));
|
notice.show = "".concat(secondToTime(player.currentTime), " / ").concat(secondToTime(player.duration));
|
||||||
art.emit('seek', time);
|
art.emit('seek', player.currentTime);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
def(player, 'forward', {
|
||||||
|
set: function set(time) {
|
||||||
|
player.seek = player.currentTime + time;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
def(player, 'backward', {
|
||||||
|
set: function set(time) {
|
||||||
|
player.seek = player.currentTime - time;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -3633,7 +3646,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
_this.add(37, function () {
|
_this.add(37, function () {
|
||||||
player.seek = player.currentTime - 5;
|
player.backward = 5;
|
||||||
});
|
});
|
||||||
|
|
||||||
_this.add(38, function () {
|
_this.add(38, function () {
|
||||||
@@ -3641,7 +3654,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
_this.add(39, function () {
|
_this.add(39, function () {
|
||||||
player.seek = player.currentTime + 5;
|
player.forward = 5;
|
||||||
});
|
});
|
||||||
|
|
||||||
_this.add(40, function () {
|
_this.add(40, function () {
|
||||||
@@ -4424,8 +4437,9 @@
|
|||||||
_this.option = optionValidator(mergeDeep(Artplayer.option, option), scheme);
|
_this.option = optionValidator(mergeDeep(Artplayer.option, option), scheme);
|
||||||
_this.isFocus = false;
|
_this.isFocus = false;
|
||||||
_this.isDestroy = false;
|
_this.isDestroy = false;
|
||||||
_this.ua = userAgent;
|
_this.userAgent = userAgent;
|
||||||
_this.isMobile = isMobile();
|
_this.isMobile = isMobile;
|
||||||
|
_this.isWechat = isWechat;
|
||||||
_this.whitelist = new Whitelist(assertThisInitialized(_this));
|
_this.whitelist = new Whitelist(assertThisInitialized(_this));
|
||||||
_this.template = new Template(assertThisInitialized(_this));
|
_this.template = new Template(assertThisInitialized(_this));
|
||||||
_this.events = new Events(assertThisInitialized(_this));
|
_this.events = new Events(assertThisInitialized(_this));
|
||||||
@@ -4563,7 +4577,7 @@
|
|||||||
},
|
},
|
||||||
moreVideoAttr: {
|
moreVideoAttr: {
|
||||||
controls: false,
|
controls: false,
|
||||||
preload: isSafari() ? 'auto' : 'metadata'
|
preload: isSafari ? 'auto' : 'metadata'
|
||||||
},
|
},
|
||||||
icons: {},
|
icons: {},
|
||||||
customType: {},
|
customType: {},
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@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/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/utils/compatibility.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/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/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.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/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.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","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../pacLine truncated
|
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/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/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@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/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.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/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/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.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/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.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","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../pacLine truncated
|
||||||
@@ -21,7 +21,7 @@ export default class Hotkey {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.add(37, () => {
|
this.add(37, () => {
|
||||||
player.seek = player.currentTime - 5;
|
player.backward = 5;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.add(38, () => {
|
this.add(38, () => {
|
||||||
@@ -29,14 +29,14 @@ export default class Hotkey {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.add(39, () => {
|
this.add(39, () => {
|
||||||
player.seek = player.currentTime + 5;
|
player.forward = 5;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.add(40, () => {
|
this.add(40, () => {
|
||||||
player.volume -= 0.1;
|
player.volume -= 0.1;
|
||||||
});
|
});
|
||||||
|
|
||||||
proxy(window, 'keydown', event => {
|
proxy(window, 'keydown', (event) => {
|
||||||
if (art.isFocus) {
|
if (art.isFocus) {
|
||||||
const tag = document.activeElement.tagName.toUpperCase();
|
const tag = document.activeElement.tagName.toUpperCase();
|
||||||
const editable = document.activeElement.getAttribute('contenteditable');
|
const editable = document.activeElement.getAttribute('contenteditable');
|
||||||
@@ -44,7 +44,7 @@ export default class Hotkey {
|
|||||||
const events = this.keys[event.keyCode];
|
const events = this.keys[event.keyCode];
|
||||||
if (events) {
|
if (events) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
events.forEach(fn => fn());
|
events.forEach((fn) => fn());
|
||||||
art.emit('hotkey', event);
|
art.emit('hotkey', event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,8 +32,9 @@ class Artplayer extends Emitter {
|
|||||||
this.option = validator(utils.mergeDeep(Artplayer.option, option), scheme);
|
this.option = validator(utils.mergeDeep(Artplayer.option, option), scheme);
|
||||||
this.isFocus = false;
|
this.isFocus = false;
|
||||||
this.isDestroy = false;
|
this.isDestroy = false;
|
||||||
this.ua = utils.userAgent;
|
this.userAgent = utils.userAgent;
|
||||||
this.isMobile = utils.isMobile();
|
this.isMobile = utils.isMobile;
|
||||||
|
this.isWechat = utils.isWechat;
|
||||||
this.whitelist = new Whitelist(this);
|
this.whitelist = new Whitelist(this);
|
||||||
this.template = new Template(this);
|
this.template = new Template(this);
|
||||||
this.events = new Events(this);
|
this.events = new Events(this);
|
||||||
@@ -148,7 +149,7 @@ class Artplayer extends Emitter {
|
|||||||
},
|
},
|
||||||
moreVideoAttr: {
|
moreVideoAttr: {
|
||||||
controls: false,
|
controls: false,
|
||||||
preload: utils.isSafari() ? 'auto' : 'metadata',
|
preload: utils.isSafari ? 'auto' : 'metadata',
|
||||||
},
|
},
|
||||||
icons: {},
|
icons: {},
|
||||||
customType: {},
|
customType: {},
|
||||||
|
|||||||
@@ -6,8 +6,20 @@ export default function seekMix(art, player) {
|
|||||||
def(player, 'seek', {
|
def(player, 'seek', {
|
||||||
set(time) {
|
set(time) {
|
||||||
player.currentTime = time;
|
player.currentTime = time;
|
||||||
notice.show = `${secondToTime(time)} / ${secondToTime(player.duration)}`;
|
notice.show = `${secondToTime(player.currentTime)} / ${secondToTime(player.duration)}`;
|
||||||
art.emit('seek', time);
|
art.emit('seek', player.currentTime);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
def(player, 'forward', {
|
||||||
|
set(time) {
|
||||||
|
player.seek = player.currentTime + time;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
def(player, 'backward', {
|
||||||
|
set(time) {
|
||||||
|
player.seek = player.currentTime - time;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -12,7 +12,7 @@ export default class Template {
|
|||||||
}
|
}
|
||||||
|
|
||||||
errorHandle(
|
errorHandle(
|
||||||
art.constructor.instances.every(art => art.template.$container !== this.$container),
|
art.constructor.instances.every((art) => art.template.$container !== this.$container),
|
||||||
'Cannot mount multiple instances on the same dom element',
|
'Cannot mount multiple instances on the same dom element',
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -131,6 +131,10 @@ export default class Template {
|
|||||||
addClass(this.$info, 'art-backdrop-filter');
|
addClass(this.$info, 'art-backdrop-filter');
|
||||||
addClass(this.$contextmenu, 'art-backdrop-filter');
|
addClass(this.$contextmenu, 'art-backdrop-filter');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.art.isMobile) {
|
||||||
|
addClass(this.$container, 'art-mobile');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mobile() {
|
mobile() {
|
||||||
|
|||||||
@@ -1,9 +1,4 @@
|
|||||||
export const userAgent = window.navigator.userAgent;
|
export const userAgent = window.navigator.userAgent;
|
||||||
|
export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
||||||
export function isMobile() {
|
export const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
|
||||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
export const isWechat = /MicroMessenger/i.test(userAgent);
|
||||||
}
|
|
||||||
|
|
||||||
export function isSafari() {
|
|
||||||
return /^((?!chrome|android).)*safari/i.test(userAgent);
|
|
||||||
}
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import { isMobile } from './compatibility';
|
||||||
|
|
||||||
export function query(selector, parent = document) {
|
export function query(selector, parent = document) {
|
||||||
return parent.querySelector(selector);
|
return parent.querySelector(selector);
|
||||||
}
|
}
|
||||||
@@ -37,7 +39,7 @@ export function setStyle(element, key, value) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function setStyles(element, styles) {
|
export function setStyles(element, styles) {
|
||||||
Object.keys(styles).forEach(key => {
|
Object.keys(styles).forEach((key) => {
|
||||||
setStyle(element, key, styles[key]);
|
setStyle(element, key, styles[key]);
|
||||||
});
|
});
|
||||||
return element;
|
return element;
|
||||||
@@ -49,15 +51,16 @@ export function getStyle(element, key, numberType = true) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function sublings(target) {
|
export function sublings(target) {
|
||||||
return Array.from(target.parentElement.children).filter(item => item !== target);
|
return Array.from(target.parentElement.children).filter((item) => item !== target);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function inverseClass(target, className) {
|
export function inverseClass(target, className) {
|
||||||
sublings(target).forEach(item => removeClass(item, className));
|
sublings(target).forEach((item) => removeClass(item, className));
|
||||||
addClass(target, className);
|
addClass(target, className);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function tooltip(target, msg, pos = 'up') {
|
export function tooltip(target, msg, pos = 'up') {
|
||||||
|
if (isMobile) return;
|
||||||
target.setAttribute('aria-label', msg);
|
target.setAttribute('aria-label', msg);
|
||||||
target.setAttribute('data-balloon-pos', pos);
|
target.setAttribute('data-balloon-pos', pos);
|
||||||
}
|
}
|
||||||
@@ -9,11 +9,11 @@ export default class Whitelist {
|
|||||||
whitelist.some((item) => {
|
whitelist.some((item) => {
|
||||||
switch (kindOf(item)) {
|
switch (kindOf(item)) {
|
||||||
case 'string':
|
case 'string':
|
||||||
return item === '*' || art.ua.indexOf(item) > -1;
|
return item === '*' || art.userAgent.indexOf(item) > -1;
|
||||||
case 'function':
|
case 'function':
|
||||||
return item(art.ua);
|
return item(art.userAgent);
|
||||||
case 'regexp':
|
case 'regexp':
|
||||||
return item.test(art.ua);
|
return item.test(art.userAgent);
|
||||||
default:
|
default:
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user