mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-18 19:01:20 -08:00
4.2.0
This commit is contained in:
zhw2590582 committed
1 parent
9bc87eb0e2
commit
b70a804591
54 files changed
+357
-226
No files matched your search
@@ -702,6 +702,72 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## attr
|
||||
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamically get and set the properties of the video element
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.attr('playsInline'));
|
||||
art.attr('playsInline', true);
|
||||
console.info(art.attr('playsInline'));
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamic get and set player title
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.title);
|
||||
art.title = 'New Title';
|
||||
console.info(art.title);
|
||||
});
|
||||
```
|
||||
|
||||
## theme
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Dynamic get and set player theme color
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.theme);
|
||||
art.theme = '#000';
|
||||
console.info(art.theme);
|
||||
});
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
@@ -21,7 +21,7 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.play();
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## pause
|
||||
@@ -45,7 +45,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.pause();
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## toggle
|
||||
@@ -69,7 +69,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.toggle();
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## seek
|
||||
@@ -89,7 +89,7 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 5;
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## forward
|
||||
@@ -109,7 +109,7 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.forward = 5;
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## backward
|
||||
@@ -133,7 +133,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.backward = 2;
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## volume
|
||||
@@ -155,7 +155,7 @@ art.on('ready', () => {
|
||||
console.info(art.volume);
|
||||
art.volume = 0.5;
|
||||
console.info(art.volume);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## url
|
||||
@@ -177,7 +177,7 @@ art.on('ready', () => {
|
||||
console.info(art.url);
|
||||
art.url = '/assets/sample/video.mp4?t=0';
|
||||
console.info(art.url);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## switchUrl
|
||||
@@ -202,7 +202,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.switchUrl('/assets/sample/video.mp4?t=0', '新视频名字');
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## switchQuality
|
||||
@@ -227,7 +227,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.switchQuality('/assets/sample/video.mp4?t=0', '新视频地址');
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## muted
|
||||
@@ -249,7 +249,7 @@ art.on('ready', () => {
|
||||
console.info(art.muted);
|
||||
art.muted = true;
|
||||
console.info(art.muted);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## currentTime
|
||||
@@ -271,7 +271,7 @@ art.on('ready', () => {
|
||||
console.info(art.currentTime);
|
||||
art.currentTime = 5;
|
||||
console.info(art.currentTime);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## duration
|
||||
@@ -290,7 +290,7 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.duration);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
@@ -316,7 +316,7 @@ var art = new Artplayer({
|
||||
art.on('ready', () => {
|
||||
art.seek = 10;
|
||||
art.screenshot();
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## getDataURL
|
||||
@@ -335,8 +335,8 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 10;
|
||||
art.getDataURL().then(url => console.info(url));
|
||||
})
|
||||
art.getDataURL().then((url) => console.info(url));
|
||||
});
|
||||
```
|
||||
|
||||
## getBlobUrl
|
||||
@@ -355,8 +355,8 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.seek = 10;
|
||||
art.getBlobUrl().then(url => console.info(url));
|
||||
})
|
||||
art.getBlobUrl().then((url) => console.info(url));
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreen
|
||||
@@ -381,7 +381,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.fullscreen = false;
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
@@ -412,7 +412,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.fullscreenWeb = false;
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## pip
|
||||
@@ -437,7 +437,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.pip = false;
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
@@ -466,7 +466,7 @@ art.on('ready', () => {
|
||||
console.info(art.poster);
|
||||
art.poster = '/assets/sample/poster.jpg?t=0';
|
||||
console.info(art.poster);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## mini
|
||||
@@ -490,7 +490,7 @@ art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.mini = false;
|
||||
}, 3000);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## playing
|
||||
@@ -513,7 +513,7 @@ art.on('ready', () => {
|
||||
console.info(art.playing);
|
||||
art.play();
|
||||
console.info(art.playing);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## autoSize
|
||||
@@ -535,7 +535,7 @@ art.on('ready', () => {
|
||||
console.info(art.autoSize);
|
||||
art.autoSize = true;
|
||||
console.info(art.autoSize);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## rect
|
||||
@@ -554,7 +554,7 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(JSON.stringify(art.rect));
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
@@ -579,10 +579,10 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.flip)
|
||||
art.flip = 'horizontal'
|
||||
console.info(art.flip)
|
||||
})
|
||||
console.info(art.flip);
|
||||
art.flip = 'horizontal';
|
||||
console.info(art.flip);
|
||||
});
|
||||
```
|
||||
|
||||
## rotate
|
||||
@@ -602,10 +602,10 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.rotate)
|
||||
art.rotate = 90
|
||||
console.info(art.rotate)
|
||||
})
|
||||
console.info(art.rotate);
|
||||
art.rotate = 90;
|
||||
console.info(art.rotate);
|
||||
});
|
||||
```
|
||||
|
||||
## playbackRate
|
||||
@@ -624,10 +624,10 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.playbackRate)
|
||||
art.playbackRate = 2
|
||||
console.info(art.playbackRate)
|
||||
})
|
||||
console.info(art.playbackRate);
|
||||
art.playbackRate = 2;
|
||||
console.info(art.playbackRate);
|
||||
});
|
||||
```
|
||||
|
||||
## aspectRatio
|
||||
@@ -646,10 +646,10 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.aspectRatio)
|
||||
art.aspectRatio = '16:9'
|
||||
console.info(art.aspectRatio)
|
||||
})
|
||||
console.info(art.aspectRatio);
|
||||
art.aspectRatio = '16:9';
|
||||
console.info(art.aspectRatio);
|
||||
});
|
||||
```
|
||||
|
||||
## loop
|
||||
@@ -668,10 +668,10 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.loop)
|
||||
console.info(art.loop);
|
||||
art.loop = [5, 10];
|
||||
console.info(art.loop)
|
||||
})
|
||||
console.info(art.loop);
|
||||
});
|
||||
```
|
||||
|
||||
:::tip 提示
|
||||
@@ -702,6 +702,72 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## attr
|
||||
|
||||
- 类型: `Function`
|
||||
- 参数: `String`
|
||||
|
||||
动态获取和设置 video 元素的属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.attr('playsInline'));
|
||||
art.attr('playsInline', true);
|
||||
console.info(art.attr('playsInline'));
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
|
||||
动态获取和设置播放器标题
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.title);
|
||||
art.title = '新标题';
|
||||
console.info(art.title);
|
||||
});
|
||||
```
|
||||
|
||||
## theme
|
||||
|
||||
- 类型: `Setter/Getter`
|
||||
- 参数: `String`
|
||||
|
||||
动态获取和设置播放器主题颜色
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.theme);
|
||||
art.theme = '#000';
|
||||
console.info(art.theme);
|
||||
});
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- 类型: `Function`
|
||||
@@ -719,5 +785,5 @@ var art = new Artplayer({
|
||||
|
||||
art.on('ready', () => {
|
||||
art.destroy();
|
||||
})
|
||||
```
|
||||
});
|
||||
```
|
||||
Vendored
+3
-3
@@ -1,8 +1,8 @@
|
||||
/*!
|
||||
* artplayer.js v4.1.4
|
||||
* artplayer.js v4.2.0
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer#readme
|
||||
* (c) 2017-2021 Harvey Zack
|
||||
* (c) 2017-2022 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;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{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@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{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.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{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.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{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function s(t){return s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},s(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;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{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@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{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.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{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.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{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:nonLine truncated
|
||||
@@ -1,10 +1,7 @@
|
||||
import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent } from '../utils';
|
||||
|
||||
export function getPosFromEvent(art, event) {
|
||||
const {
|
||||
template: { $progress },
|
||||
} = art;
|
||||
|
||||
const { $progress } = art.template;
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
const width = clamp(event.pageX - left, 0, $progress.clientWidth);
|
||||
const second = (width / $progress.clientWidth) * art.duration;
|
||||
|
||||
@@ -69,5 +69,6 @@ export default class Hotkey {
|
||||
this.keys[key].splice(index, 1);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}
|
||||
@@ -16,12 +16,12 @@ export default function attrInit(art) {
|
||||
}
|
||||
|
||||
if (option.volume) {
|
||||
art.volume = clamp(option.volume, 0, 1);
|
||||
$video.volume = clamp(option.volume, 0, 1);
|
||||
}
|
||||
|
||||
const volume = storage.get('volume');
|
||||
if (volume) {
|
||||
art.volume = clamp(volume, 0, 1);
|
||||
const volumeStorage = storage.get('volume');
|
||||
if (typeof volumeStorage === 'number') {
|
||||
$video.volume = clamp(volumeStorage, 0, 1);
|
||||
}
|
||||
|
||||
if (option.poster) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default function miniProgressBar(art) {
|
||||
const { layers, option } = art;
|
||||
const { layers } = art;
|
||||
|
||||
layers.add({
|
||||
name: 'miniProgressBar',
|
||||
|
||||
@@ -3,27 +3,28 @@ import { errorHandle, query, addClass, replaceElement, isMobile } from './utils'
|
||||
export default class Template {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
const { option, constructor, whitelist } = art;
|
||||
|
||||
this.query = this.query.bind(this);
|
||||
|
||||
if (art.option.container instanceof Element) {
|
||||
this.$container = art.option.container;
|
||||
if (option.container instanceof Element) {
|
||||
this.$container = option.container;
|
||||
} else {
|
||||
this.$container = query(art.option.container);
|
||||
errorHandle(this.$container, `No container element found by ${art.option.container}`);
|
||||
this.$container = query(option.container);
|
||||
errorHandle(this.$container, `No container element found by ${option.container}`);
|
||||
}
|
||||
|
||||
const type = this.$container.tagName.toLowerCase();
|
||||
errorHandle(type === 'div', `Unsupported container element type, only support 'div' but got '${type}'`);
|
||||
|
||||
errorHandle(
|
||||
art.constructor.instances.every((ins) => ins.template.$container !== this.$container),
|
||||
constructor.instances.every((ins) => ins.template.$container !== this.$container),
|
||||
'Cannot mount multiple instances on the same dom element',
|
||||
);
|
||||
|
||||
this.query = this.query.bind(this);
|
||||
this.$container.dataset.artId = art.id;
|
||||
this.$original = this.$container.cloneNode(true);
|
||||
|
||||
if (art.whitelist.state) {
|
||||
if (whitelist.state) {
|
||||
this.desktop();
|
||||
} else {
|
||||
this.mobile();
|
||||
@@ -102,9 +103,9 @@ export default class Template {
|
||||
}
|
||||
|
||||
desktop() {
|
||||
const { backdrop, useSSR } = this.art.option;
|
||||
const { option } = this.art;
|
||||
|
||||
if (!useSSR) {
|
||||
if (!option.useSSR) {
|
||||
this.$container.innerHTML = Template.html;
|
||||
}
|
||||
|
||||
@@ -135,9 +136,7 @@ export default class Template {
|
||||
this.$miniClose = this.query('.art-mini-close');
|
||||
this.$contextmenu = this.query('.art-contextmenus');
|
||||
|
||||
this.$container.dataset.artId = this.art.id;
|
||||
|
||||
if (backdrop) {
|
||||
if (option.backdrop) {
|
||||
addClass(this.$settingInner, 'art-backdrop-filter');
|
||||
addClass(this.$contextmenu, 'art-backdrop-filter');
|
||||
addClass(this.$info, 'art-backdrop-filter');
|
||||
|
||||
Reference in new issue
Block a user