mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-12 06:26:16 -08:00
feat: Add support for dynamic thumbnails in Artplayer
The code changes introduce a new `art.thumbnails` property that allows for dynamic setting of thumbnails in Artplayer. This feature enhances the user experience by providing a visual preview of the video content.
This commit is contained in:
Harvey Zack committed
1 parent
5655db4b20
commit
52d9064c8b
10 files changed
+260
-110
No files matched your search
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
- 新增 `Artplayer.STYLE` 属性，返回播放器样式文本
|
||||
- `art.screenshot('your-name')` 截图功能支持自定义文件名字
|
||||
- `Artplayer.CONTEXTMENU` 为 `false` 时，不再隐藏默认右键菜单
|
||||
- 新增 `art.thumbnails` 属性，用于动态设置 `thumbnails`
|
||||
|
||||
## [5.1.6] - 2024-6-15
|
||||
|
||||
|
||||
@@ -236,13 +236,13 @@ class Artplayer extends (0, _emitterDefault.default) {
|
||||
return instances;
|
||||
}
|
||||
static get version() {
|
||||
return "5.1.6";
|
||||
return "5.1.7";
|
||||
}
|
||||
static get env() {
|
||||
return "development";
|
||||
}
|
||||
static get build() {
|
||||
return "2024-06-08 17:29:16";
|
||||
return "2024-08-15 22:21:54";
|
||||
}
|
||||
static get config() {
|
||||
return 0, _configDefault.default;
|
||||
@@ -352,6 +352,7 @@ class Artplayer extends (0, _emitterDefault.default) {
|
||||
}
|
||||
}
|
||||
exports.default = Artplayer;
|
||||
Artplayer.STYLE = (0, _indexLessDefault.default);
|
||||
Artplayer.DEBUG = false;
|
||||
Artplayer.CONTEXTMENU = true;
|
||||
Artplayer.NOTICE_TIME = 2000;
|
||||
@@ -1257,7 +1258,7 @@ class Template {
|
||||
<div class="art-info-panel">
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Player version:</div>
|
||||
<div class="art-info-content">${"5.1.6"}</div>
|
||||
<div class="art-info-content">${"5.1.7"}</div>
|
||||
</div>
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Video url:</div>
|
||||
@@ -1467,6 +1468,8 @@ var _airplayMix = require("./airplayMix");
|
||||
var _airplayMixDefault = parcelHelpers.interopDefault(_airplayMix);
|
||||
var _qualityMix = require("./qualityMix");
|
||||
var _qualityMixDefault = parcelHelpers.interopDefault(_qualityMix);
|
||||
var _thumbnailsMix = require("./thumbnailsMix");
|
||||
var _thumbnailsMixDefault = parcelHelpers.interopDefault(_thumbnailsMix);
|
||||
var _optionInit = require("./optionInit");
|
||||
var _optionInitDefault = parcelHelpers.interopDefault(_optionInit);
|
||||
var _eventInit = require("./eventInit");
|
||||
@@ -1505,13 +1508,14 @@ class Player {
|
||||
(0, _subtitleOffsetMixDefault.default)(art);
|
||||
(0, _airplayMixDefault.default)(art);
|
||||
(0, _qualityMixDefault.default)(art);
|
||||
(0, _thumbnailsMixDefault.default)(art);
|
||||
(0, _eventInitDefault.default)(art);
|
||||
(0, _optionInitDefault.default)(art);
|
||||
}
|
||||
}
|
||||
exports.default = Player;
|
||||
|
||||
},{"./urlMix":"haOhz","./attrMix":"cSnpy","./playMix":"ftnB3","./pauseMix":"kDy9r","./toggleMix":"12BL6","./seekMix":"8x3vZ","./volumeMix":"lsF5V","./currentTimeMix":"75HaL","./durationMix":"5Ud6d","./switchMix":"emcjh","./playbackRateMix":"78DYM","./aspectRatioMix":"chjHL","./screenshotMix":"jDAYl","./fullscreenMix":"juJAD","./fullscreenWebMix":"5f725","./pipMix":"jWhCt","./loadedMix":"jhDPX","./playedMix":"3bU8P","./playingMix":"5Ctiw","./autoSizeMix":"6fRkJ","./rectMix":"lOJRK","./flipMix":"fSa7B","./miniMix":"fy4qC","./posterMix":"lglHp","./autoHeightMix":"58Y02","./cssVarMix":"fPbnY","./themeMix":"lga3g","./typeMix":"dnAFx","./stateMix":"8mwXw","./subtitleOffsetMix":"4Ny6z","./airplayMix":"gcYqJ","./qualityMix":"1L7ST","./optionInit":"vGIPW","./eventInit":"5D1O8","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"haOhz":[function(require,module,exports) {
|
||||
},{"./urlMix":"haOhz","./attrMix":"cSnpy","./playMix":"ftnB3","./pauseMix":"kDy9r","./toggleMix":"12BL6","./seekMix":"8x3vZ","./volumeMix":"lsF5V","./currentTimeMix":"75HaL","./durationMix":"5Ud6d","./switchMix":"emcjh","./playbackRateMix":"78DYM","./aspectRatioMix":"chjHL","./screenshotMix":"jDAYl","./fullscreenMix":"juJAD","./fullscreenWebMix":"5f725","./pipMix":"jWhCt","./loadedMix":"jhDPX","./playedMix":"3bU8P","./playingMix":"5Ctiw","./autoSizeMix":"6fRkJ","./rectMix":"lOJRK","./flipMix":"fSa7B","./miniMix":"fy4qC","./posterMix":"lglHp","./autoHeightMix":"58Y02","./cssVarMix":"fPbnY","./themeMix":"lga3g","./typeMix":"dnAFx","./stateMix":"8mwXw","./subtitleOffsetMix":"4Ny6z","./airplayMix":"gcYqJ","./qualityMix":"1L7ST","./optionInit":"vGIPW","./eventInit":"5D1O8","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN","./thumbnailsMix":"8B5I7"}],"haOhz":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>urlMix);
|
||||
@@ -2720,7 +2724,79 @@ function eventInit(art) {
|
||||
});
|
||||
}
|
||||
|
||||
},{"../config":"1hSww","../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"nK2ZQ":[function(require,module,exports) {
|
||||
},{"../config":"1hSww","../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"8B5I7":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>thumbnailsMix);
|
||||
var _utils = require("../utils");
|
||||
function thumbnailsMix(art) {
|
||||
const { option, events: { loadImg }, template: { $progress, $video } } = art;
|
||||
let timer = null;
|
||||
let image = null;
|
||||
let loading = false;
|
||||
let isLoad = false;
|
||||
function reset() {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
image = null;
|
||||
loading = false;
|
||||
isLoad = false;
|
||||
}
|
||||
function showThumbnails(posWidth) {
|
||||
const $thumbnails = art.controls?.thumbnails;
|
||||
if (!$thumbnails) return;
|
||||
const { url, number, column, width, height } = option.thumbnails;
|
||||
const width2 = width || image.naturalWidth / column;
|
||||
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
||||
const perWidth = $progress.clientWidth / number;
|
||||
const perIndex = Math.floor(posWidth / perWidth);
|
||||
const yIndex = Math.ceil(perIndex / column) - 1;
|
||||
const xIndex = perIndex % column || column - 1;
|
||||
(0, _utils.setStyle)($thumbnails, "backgroundImage", `url(${url})`);
|
||||
(0, _utils.setStyle)($thumbnails, "height", `${height2}px`);
|
||||
(0, _utils.setStyle)($thumbnails, "width", `${width2}px`);
|
||||
(0, _utils.setStyle)($thumbnails, "backgroundPosition", `-${xIndex * width2}px -${yIndex * height2}px`);
|
||||
if (posWidth <= width2 / 2) (0, _utils.setStyle)($thumbnails, "left", 0);
|
||||
else if (posWidth > $progress.clientWidth - width2 / 2) (0, _utils.setStyle)($thumbnails, "left", `${$progress.clientWidth - width2}px`);
|
||||
else (0, _utils.setStyle)($thumbnails, "left", `${posWidth - width2 / 2}px`);
|
||||
}
|
||||
art.on("setBar", async (type, percentage, event)=>{
|
||||
const $thumbnails = art.controls?.thumbnails;
|
||||
if (!$thumbnails) return;
|
||||
const isMobileDroging = type === "played" && event && (0, _utils.isMobile);
|
||||
if (type === "hover" || isMobileDroging) {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
image = await loadImg(option.thumbnails.url);
|
||||
isLoad = true;
|
||||
}
|
||||
if (!isLoad) return;
|
||||
const width = $progress.clientWidth * percentage;
|
||||
(0, _utils.setStyle)($thumbnails, "display", "flex");
|
||||
if (width > 0 && width < $progress.clientWidth) showThumbnails(width);
|
||||
else if (!(0, _utils.isMobile)) (0, _utils.setStyle)($thumbnails, "display", "none");
|
||||
if (isMobileDroging) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(()=>{
|
||||
(0, _utils.setStyle)($thumbnails, "display", "none");
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
(0, _utils.def)(art, "thumbnails", {
|
||||
get () {
|
||||
return art.option.thumbnails;
|
||||
},
|
||||
set (thumbnails) {
|
||||
if (thumbnails.url && !art.option.isLive) {
|
||||
art.option.thumbnails = thumbnails;
|
||||
reset();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},{"../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"nK2ZQ":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _utils = require("../utils");
|
||||
@@ -2788,7 +2864,7 @@ class Control extends (0, _componentDefault.default) {
|
||||
position: "top",
|
||||
index: 10
|
||||
}));
|
||||
if (option.thumbnails.url && !option.isLive) this.add((0, _thumbnailsDefault.default)({
|
||||
this.add((0, _thumbnailsDefault.default)({
|
||||
name: "thumbnails",
|
||||
position: "top",
|
||||
index: 20
|
||||
@@ -3683,7 +3759,7 @@ parcelHelpers.export(exports, "default", ()=>version);
|
||||
function version(option) {
|
||||
return {
|
||||
...option,
|
||||
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"5.1.6"}</a>`
|
||||
html: `<a href="https://artplayer.org" target="_blank">ArtPlayer ${"5.1.7"}</a>`
|
||||
};
|
||||
}
|
||||
|
||||
@@ -5116,6 +5192,22 @@ function autoOrientation(art) {
|
||||
art.emit("resize");
|
||||
}
|
||||
});
|
||||
art.on("fullscreen", async (state)=>{
|
||||
if (!screen?.orientation?.lock) return;
|
||||
const lastOrientation = screen.orientation.type;
|
||||
if (state) {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
|
||||
if (videoWidth > videoHeight && viewWidth < viewHeight || videoWidth < videoHeight && viewWidth > viewHeight) {
|
||||
const oppositeOrientation = lastOrientation.startsWith("portrait") ? "landscape" : "portrait";
|
||||
await screen.orientation.lock(oppositeOrientation);
|
||||
(0, _utils.addClass)($player, "art-auto-orientation-fullscreen");
|
||||
}
|
||||
} else if ((0, _utils.hasClass)($player, "art-auto-orientation-fullscreen")) {
|
||||
await screen.orientation.lock(lastOrientation);
|
||||
(0, _utils.removeClass)($player, "art-auto-orientation-fullscreen");
|
||||
}
|
||||
});
|
||||
return {
|
||||
name: "autoOrientation",
|
||||
get state () {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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 truncated
|
||||
{"mappings":"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 truncated
|
||||
@@ -940,4 +940,28 @@ art.on('ready', () => {
|
||||
];
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
|
||||
## `thumbnails`
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Object`
|
||||
|
||||
动态设置缩略图
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.thumbnails = {
|
||||
url: '/assets/sample/thumbnails.png',
|
||||
number: 60,
|
||||
column: 10,
|
||||
};
|
||||
});
|
||||
```
|
||||
@@ -81,15 +81,13 @@ export default class Control extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
if (option.thumbnails.url && !option.isLive) {
|
||||
this.add(
|
||||
thumbnails({
|
||||
name: 'thumbnails',
|
||||
position: 'top',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
}
|
||||
this.add(
|
||||
thumbnails({
|
||||
name: 'thumbnails',
|
||||
position: 'top',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
playAndPause({
|
||||
|
||||
@@ -1,72 +1,8 @@
|
||||
import { setStyle, isMobile } from '../utils';
|
||||
|
||||
export default function thumbnails(options) {
|
||||
return (art) => ({
|
||||
...options,
|
||||
mounted: ($control) => {
|
||||
const {
|
||||
option,
|
||||
events: { loadImg },
|
||||
template: { $progress, $video },
|
||||
} = art;
|
||||
|
||||
let timer = null;
|
||||
let image = null;
|
||||
let loading = false;
|
||||
let isLoad = false;
|
||||
|
||||
function showThumbnails(posWidth) {
|
||||
const { url, number, column, width, height } = option.thumbnails;
|
||||
const width2 = width || image.naturalWidth / column;
|
||||
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
||||
const perWidth = $progress.clientWidth / number;
|
||||
const perIndex = Math.floor(posWidth / perWidth);
|
||||
const yIndex = Math.ceil(perIndex / column) - 1;
|
||||
const xIndex = perIndex % column || column - 1;
|
||||
setStyle($control, 'backgroundImage', `url(${url})`);
|
||||
setStyle($control, 'height', `${height2}px`);
|
||||
setStyle($control, 'width', `${width2}px`);
|
||||
setStyle($control, 'backgroundPosition', `-${xIndex * width2}px -${yIndex * height2}px`);
|
||||
if (posWidth <= width2 / 2) {
|
||||
setStyle($control, 'left', 0);
|
||||
} else if (posWidth > $progress.clientWidth - width2 / 2) {
|
||||
setStyle($control, 'left', `${$progress.clientWidth - width2}px`);
|
||||
} else {
|
||||
setStyle($control, 'left', `${posWidth - width2 / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
art.on('setBar', async (type, percentage, event) => {
|
||||
const isMobileDroging = type === 'played' && event && isMobile;
|
||||
|
||||
if (type === 'hover' || isMobileDroging) {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
image = await loadImg(option.thumbnails.url);
|
||||
isLoad = true;
|
||||
}
|
||||
|
||||
if (!isLoad) return;
|
||||
|
||||
const width = $progress.clientWidth * percentage;
|
||||
setStyle($control, 'display', 'flex');
|
||||
|
||||
if (width > 0 && width < $progress.clientWidth) {
|
||||
showThumbnails(width);
|
||||
} else {
|
||||
if (!isMobile) {
|
||||
setStyle($control, 'display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
if (isMobileDroging) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
setStyle($control, 'display', 'none');
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
mounted: () => {
|
||||
this.art.thumbnails = art.options.thumbnails;
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -30,6 +30,7 @@ import stateMix from './stateMix';
|
||||
import subtitleOffsetMix from './subtitleOffsetMix';
|
||||
import airplayMix from './airplayMix';
|
||||
import qualityMix from './qualityMix';
|
||||
import thumbnailsMix from './thumbnailsMix';
|
||||
import optionInit from './optionInit';
|
||||
import eventInit from './eventInit';
|
||||
|
||||
@@ -67,6 +68,7 @@ export default class Player {
|
||||
subtitleOffsetMix(art);
|
||||
airplayMix(art);
|
||||
qualityMix(art);
|
||||
thumbnailsMix(art);
|
||||
eventInit(art);
|
||||
optionInit(art);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import { def, setStyle, isMobile } from '../utils';
|
||||
|
||||
export default function thumbnailsMix(art) {
|
||||
const {
|
||||
option,
|
||||
events: { loadImg },
|
||||
template: { $progress, $video },
|
||||
} = art;
|
||||
|
||||
let timer = null;
|
||||
let image = null;
|
||||
let loading = false;
|
||||
let isLoad = false;
|
||||
|
||||
function reset() {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
image = null;
|
||||
loading = false;
|
||||
isLoad = false;
|
||||
}
|
||||
|
||||
function showThumbnails(posWidth) {
|
||||
const $thumbnails = art.controls?.thumbnails;
|
||||
if (!$thumbnails) return;
|
||||
|
||||
const { url, number, column, width, height } = option.thumbnails;
|
||||
const width2 = width || image.naturalWidth / column;
|
||||
const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
|
||||
const perWidth = $progress.clientWidth / number;
|
||||
const perIndex = Math.floor(posWidth / perWidth);
|
||||
const yIndex = Math.ceil(perIndex / column) - 1;
|
||||
const xIndex = perIndex % column || column - 1;
|
||||
setStyle($thumbnails, 'backgroundImage', `url(${url})`);
|
||||
setStyle($thumbnails, 'height', `${height2}px`);
|
||||
setStyle($thumbnails, 'width', `${width2}px`);
|
||||
setStyle($thumbnails, 'backgroundPosition', `-${xIndex * width2}px -${yIndex * height2}px`);
|
||||
if (posWidth <= width2 / 2) {
|
||||
setStyle($thumbnails, 'left', 0);
|
||||
} else if (posWidth > $progress.clientWidth - width2 / 2) {
|
||||
setStyle($thumbnails, 'left', `${$progress.clientWidth - width2}px`);
|
||||
} else {
|
||||
setStyle($thumbnails, 'left', `${posWidth - width2 / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
art.on('setBar', async (type, percentage, event) => {
|
||||
const $thumbnails = art.controls?.thumbnails;
|
||||
if (!$thumbnails) return;
|
||||
|
||||
const isMobileDroging = type === 'played' && event && isMobile;
|
||||
|
||||
if (type === 'hover' || isMobileDroging) {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
image = await loadImg(option.thumbnails.url);
|
||||
isLoad = true;
|
||||
}
|
||||
|
||||
if (!isLoad) return;
|
||||
|
||||
const width = $progress.clientWidth * percentage;
|
||||
setStyle($thumbnails, 'display', 'flex');
|
||||
|
||||
if (width > 0 && width < $progress.clientWidth) {
|
||||
showThumbnails(width);
|
||||
} else {
|
||||
if (!isMobile) {
|
||||
setStyle($thumbnails, 'display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
if (isMobileDroging) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
setStyle($thumbnails, 'display', 'none');
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
def(art, 'thumbnails', {
|
||||
get() {
|
||||
return art.option.thumbnails;
|
||||
},
|
||||
set(thumbnails) {
|
||||
if (thumbnails.url && !art.option.isLive) {
|
||||
art.option.thumbnails = thumbnails;
|
||||
reset();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
Vendored
+28
-26
@@ -9,6 +9,33 @@ import Artplayer = require('./artplayer');
|
||||
|
||||
export type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record<never, never>);
|
||||
|
||||
export type Thumbnails = {
|
||||
/**
|
||||
* The thumbnail image url
|
||||
*/
|
||||
url: string;
|
||||
|
||||
/**
|
||||
* The thumbnail item number
|
||||
*/
|
||||
number?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail column size
|
||||
*/
|
||||
column?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail width
|
||||
*/
|
||||
width?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail height
|
||||
*/
|
||||
height?: number;
|
||||
};
|
||||
|
||||
export type Option = {
|
||||
/**
|
||||
* The player id
|
||||
@@ -228,32 +255,7 @@ export type Option = {
|
||||
/**
|
||||
* Custom thumbnail
|
||||
*/
|
||||
thumbnails?: {
|
||||
/**
|
||||
* The thumbnail image url
|
||||
*/
|
||||
url: string;
|
||||
|
||||
/**
|
||||
* The thumbnail item number
|
||||
*/
|
||||
number?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail column size
|
||||
*/
|
||||
column?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail width
|
||||
*/
|
||||
width?: number;
|
||||
|
||||
/**
|
||||
* The thumbnail height
|
||||
*/
|
||||
height?: number;
|
||||
};
|
||||
thumbnails?: Thumbnails;
|
||||
|
||||
/**
|
||||
* Custom subtitle option
|
||||
|
||||
Vendored
+3
-1
@@ -1,5 +1,5 @@
|
||||
import { CssVar } from './cssVar';
|
||||
import { CustomType } from './option';
|
||||
import { CustomType, Thumbnails } from './option';
|
||||
import { quality } from './quality';
|
||||
|
||||
export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>);
|
||||
@@ -63,6 +63,8 @@ export declare class Player {
|
||||
set subtitleOffset(time: number);
|
||||
set switch(url: string);
|
||||
set quality(quality: quality[]);
|
||||
get thumbnails(): Thumbnails;
|
||||
set thumbnails(thumbnails: Thumbnails);
|
||||
pause(): void;
|
||||
play(): Promise<void>;
|
||||
toggle(): void;
|
||||
|
||||
Reference in new issue
Block a user