mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
简化事件
This commit is contained in:
Harvey committed
1 parent
938b90f3a7
commit
4718cd186b
36 files changed
+223
-250
No files matched your search
+46
-56
@@ -4,7 +4,7 @@ You can use all the native events of video directly: [MDN web docs - Media event
|
||||
|
||||
But be careful to add the `video` prefix in front of the event:
|
||||
|
||||
[Run Code](/Events.canplay)
|
||||
[Run Code](/Events.video)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -15,11 +15,15 @@ var art = new Artplayer({
|
||||
art.on('video:canplay', function (event) {
|
||||
console.info(event);
|
||||
});
|
||||
|
||||
art.on('video:volumechange', function (event) {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
## Player custom event
|
||||
|
||||
[Run Code](/Events.example)
|
||||
[Run Code](/Events.custom)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
@@ -32,57 +36,43 @@ art.on('ready', function (args) {
|
||||
});
|
||||
```
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| --------------------- | --------------------------------------- | ------------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the instance is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hoverenter` | When the mouse is moved into the player | `undefined` |
|
||||
| `hoverleave` | When the mouse is moved out the player | `undefined` |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
|
||||
| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
|
||||
| `aspectRatioReset` | When aspect ratio reset | `undefined` |
|
||||
| `customType` | After triggering CustomType | Type name |
|
||||
| `urlChange` | After the video url change | Video url |
|
||||
| `autoSizeChange` | When the player auto size change | Player size |
|
||||
| `autoSizeRemove` | When the player auto size remove | `undefined` |
|
||||
| `flipChange` | When the player flip change | Flip name |
|
||||
| `flipRemove` | When the player flip remove | `undefined` |
|
||||
| `fullscreenChange` | When the full screen status change | Whether full screen |
|
||||
| `fullscreenWebChange` | When entering web full screen | Whether web full screen |
|
||||
| `pipChange` | When entering picture in picture | Whether in pip |
|
||||
| `minChange` | When entering min player | Whether in min player |
|
||||
| `playbackRateChange` | When playback rate change | Playback rate |
|
||||
| `playbackRateRemove` | When playback rate remove | `undefined` |
|
||||
| `playbackRateReset` | When playback rate reset | `undefined` |
|
||||
| `screenshot` | When a screenshot occurs | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
| `loopAdd` | When an interval loop is added | Interval arrary |
|
||||
| `loopRemove` | When the interval loop is deleted | `undefined` |
|
||||
| `loopStart` | When entering the interval cycle | Interval arrary |
|
||||
| `subtitleUpdate` | When the subtitles change | Current subtitle text |
|
||||
| `subtitleSwitch` | When switching subtitles | Current subtitle url |
|
||||
| `subtitleLoad` | When the subtitles loaded | Current subtitle url |
|
||||
| `subtitleErr` | When the subtitles load error | Error object |
|
||||
| `subtitleToggle` | When displaying subtitles | Whether to show |
|
||||
| `noticeToggle` | When displaying notice | Whether to show |
|
||||
| `maskToggle` | When displaying mask | Whether to show |
|
||||
| `loadingToggle` | When displaying loading | Whether to show |
|
||||
| `layerAdd` | When adding a new layer | Layer configuration |
|
||||
| `layerToggle` | When displaying layer | Whether to show |
|
||||
| `infoToggle` | When displaying info | Whether to show |
|
||||
| `hotkey` | When the hotkey is triggered | Hotkey event object |
|
||||
| `settingAdd` | When adding a new setting | Setting configuration |
|
||||
| `settingToggle` | When displaying setting | Whether to show |
|
||||
| `contextmenuAdd` | When adding a new contextmenu | Contextmenu configuration |
|
||||
| `contextmenuToggle` | When displaying contextmenu | Whether to show |
|
||||
| `controlAdd` | When adding a new control | Control configuration |
|
||||
| `controlToggle` | When displaying control | Whether to show |
|
||||
| `pluginAdd` | When adding a new plugin | Plugin configuration |
|
||||
| Event | Description | Parameter |
|
||||
| ------------------ | ------------------------------------ | -------------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the player is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hover` | When the mouse is moved into or out | Whether moved into |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatio` | When aspect ratio change | Aspect ratio |
|
||||
| `url` | After the video url change | Video url |
|
||||
| `autoSize` | When the player auto size change | Player size |
|
||||
| `flip` | When the player flip change | Flip name |
|
||||
| `fullscreen` | When the full screen change | Whether full screen |
|
||||
| `fullscreenWeb` | When the web full screen change | Whether web full screen |
|
||||
| `fullscreenRotate` | When the rotate full screen change | Whether rotate full screen |
|
||||
| `pip` | When the picture in picture change | Whether in pip |
|
||||
| `min` | When the min player change | Whether in min player |
|
||||
| `playbackRate` | When playback rate change | Playback rate |
|
||||
| `screenshot` | When a screenshot | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
| `loop` | When the interval loop change | Interval arrary |
|
||||
| `subtitleUpdate` | When the subtitles change | Current subtitle text |
|
||||
| `subtitleSwitch` | When switching subtitles | Current subtitle url |
|
||||
| `subtitleLoad` | When the subtitles loaded | Current subtitle url |
|
||||
| `subtitle` | When displaying subtitles | Whether to show |
|
||||
| `notice` | When displaying notice | Whether to show |
|
||||
| `mask` | When displaying mask | Whether to show |
|
||||
| `loading` | When displaying loading | Whether to show |
|
||||
| `layer` | When displaying layer | Whether to show |
|
||||
| `info` | When displaying info | Whether to show |
|
||||
| `setting` | When displaying setting | Whether to show |
|
||||
| `contextmenu` | When displaying contextmenu | Contextmenu configuration |
|
||||
| `control` | When displaying control | Control configuration |
|
||||
| `hotkey` | When the hotkey is triggered | Hotkey event object |
|
||||
| `plugin` | When adding a new plugin | Plugin configuration |
|
||||
@@ -21,7 +21,7 @@
|
||||
repo: 'zhw2590582/ArtPlayer',
|
||||
maxLevel: 4,
|
||||
auto2top: true,
|
||||
subMaxLevel: 2,
|
||||
subMaxLevel: 3,
|
||||
loadSidebar: true,
|
||||
plugins: [function (hook) {
|
||||
hook.ready(function () {
|
||||
|
||||
@@ -475,7 +475,7 @@
|
||||
|
||||
return url.trim().toLowerCase().split('.').pop();
|
||||
}
|
||||
function downloadFile(url, name) {
|
||||
function download(url, name) {
|
||||
var elink = document.createElement('a');
|
||||
elink.style.display = 'none';
|
||||
elink.href = url;
|
||||
@@ -669,7 +669,7 @@
|
||||
vttToBlob: vttToBlob,
|
||||
assToVtt: assToVtt,
|
||||
getExt: getExt,
|
||||
downloadFile: downloadFile,
|
||||
download: download,
|
||||
def: def,
|
||||
has: has,
|
||||
proxyPropertys: proxyPropertys,
|
||||
@@ -855,7 +855,7 @@
|
||||
var _this$art$option = this.art.option,
|
||||
theme = _this$art$option.theme,
|
||||
backdrop = _this$art$option.backdrop;
|
||||
this.$container.innerHTML = "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n <video class=\"art-video\"></video>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.5</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-min-header\">\n <div class=\"art-min-title\"></div>\n <div class=\"art-min-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
|
||||
this.$container.innerHTML = "\n <div class=\"art-undercover\"></div>\n <div class=\"art-video-player art-subtitle-show art-layer-show\" style=\"--theme: ".concat(theme, "\">\n <video class=\"art-video\"></video>\n <div class=\"art-subtitle\"></div>\n <div class=\"art-danmuku\"></div>\n <div class=\"art-layers\"></div>\n <div class=\"art-mask\">\n <div class=\"art-state\"></div>\n </div>\n <div class=\"art-bottom\">\n <div class=\"art-progress\"></div>\n <div class=\"art-controls\">\n <div class=\"art-controls-left\"></div>\n <div class=\"art-controls-right\"></div>\n </div>\n </div>\n <div class=\"art-loading\"></div>\n <div class=\"art-notice\">\n <div class=\"art-notice-inner\"></div>\n </div>\n <div class=\"art-settings\">\n <div class=\"art-setting-inner\">\n <div class=\"art-setting-body\"></div>\n </div>\n </div>\n <div class=\"art-info\">\n <div class=\"art-info-panel\">\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">3.5.8</div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"src\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n </div>\n <div class=\"art-info-close\">[x]</div>\n </div>\n <div class=\"art-min-header\">\n <div class=\"art-min-title\"></div>\n <div class=\"art-min-close\">\xD7</div>\n </div>\n <div class=\"art-contextmenus\"></div>\n </div>\n ");
|
||||
this.$undercover = this.query('.art-undercover');
|
||||
this.$player = this.query('.art-video-player');
|
||||
this.$video = this.query('.art-video');
|
||||
@@ -1083,12 +1083,11 @@
|
||||
sleep().then(function () {
|
||||
art.loading.show = true;
|
||||
typeCallback.call(art, $video, url, art);
|
||||
art.emit('customType', typeName);
|
||||
});
|
||||
} else {
|
||||
$video.src = url;
|
||||
art.option.url = url;
|
||||
art.emit('urlChange', url);
|
||||
art.emit('url', url);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1244,8 +1243,7 @@
|
||||
function exclusiveInit(art, player) {
|
||||
var props = ['min', 'pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
|
||||
props.forEach(function (name) {
|
||||
var event = "".concat(name, "Change");
|
||||
art.on(event, function (state) {
|
||||
art.on(name, function (state) {
|
||||
if (state) {
|
||||
props.filter(function (item) {
|
||||
return item !== name;
|
||||
@@ -1463,11 +1461,11 @@
|
||||
$video.playbackRate = rate;
|
||||
$player.dataset.playbackRate = rate;
|
||||
notice.show = "".concat(i18n.get('Rate'), ": ").concat(rate === 1.0 ? i18n.get('Normal') : "".concat(rate, "x"));
|
||||
art.emit('playbackRateChange', rate);
|
||||
art.emit('playbackRate', rate);
|
||||
} else if (player.playbackRate) {
|
||||
player.playbackRate = 1;
|
||||
delete $player.dataset.playbackRate;
|
||||
art.emit('playbackRateRemove');
|
||||
art.emit('playbackRate');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1478,7 +1476,6 @@
|
||||
|
||||
if (playbackRate) {
|
||||
player.playbackRate = Number(playbackRate);
|
||||
art.emit('playbackRateReset');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1527,13 +1524,13 @@
|
||||
|
||||
$player.dataset.aspectRatio = ratio;
|
||||
notice.show = "".concat(i18n.get('Aspect ratio'), ": ").concat(ratio === 'default' ? i18n.get('Default') : ratio);
|
||||
art.emit('aspectRatioChange', ratio);
|
||||
art.emit('aspectRatio', ratio);
|
||||
} else if (player.aspectRatio) {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatioRemove');
|
||||
art.emit('aspectRatio');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1542,7 +1539,6 @@
|
||||
if (value && player.aspectRatio) {
|
||||
var aspectRatio = player.aspectRatio;
|
||||
player.aspectRatio = aspectRatio;
|
||||
art.emit('aspectRatioReset');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1552,29 +1548,30 @@
|
||||
var option = art.option,
|
||||
notice = art.notice,
|
||||
$video = art.template.$video;
|
||||
def(player, 'getScreenshotDataURL', {
|
||||
value: function value() {
|
||||
try {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
return canvas.toDataURL('image/png');
|
||||
} catch (err) {
|
||||
notice.show = err;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
});
|
||||
def(player, 'getScreenshotBlobUrl', {
|
||||
var $canvas = document.createElement('canvas');
|
||||
def(player, 'getDataURL', {
|
||||
value: function value() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
try {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
canvas.toBlob(function (blob) {
|
||||
$canvas.width = $video.videoWidth;
|
||||
$canvas.height = $video.videoHeight;
|
||||
$canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
resolve($canvas.toDataURL('image/png'));
|
||||
} catch (err) {
|
||||
notice.show = err;
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
def(player, 'getBlobUrl', {
|
||||
value: function value() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
try {
|
||||
$canvas.width = $video.videoWidth;
|
||||
$canvas.height = $video.videoHeight;
|
||||
$canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
$canvas.toBlob(function (blob) {
|
||||
resolve(URL.createObjectURL(blob));
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -1586,12 +1583,10 @@
|
||||
});
|
||||
def(player, 'screenshot', {
|
||||
value: function value() {
|
||||
var dataUri = player.getScreenshotDataURL();
|
||||
|
||||
if (dataUri) {
|
||||
downloadFile(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"));
|
||||
player.getDataURL().then(function (dataUri) {
|
||||
download(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"));
|
||||
art.emit('screenshot', dataUri);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1787,7 +1782,7 @@
|
||||
addClass($player, 'art-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenChange', true);
|
||||
art.emit('fullscreen', true);
|
||||
});
|
||||
} else {
|
||||
screenfull.exit().then(function () {
|
||||
@@ -1795,7 +1790,7 @@
|
||||
player.aspectRatioReset = true;
|
||||
player.autoSize = art.option.autoSize;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenChange', false);
|
||||
art.emit('fullscreen');
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1820,13 +1815,13 @@
|
||||
addClass($player, 'art-fullscreen-web');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWebChange', true);
|
||||
art.emit('fullscreenWeb', true);
|
||||
} else {
|
||||
removeClass($player, 'art-fullscreen-web');
|
||||
player.aspectRatioReset = true;
|
||||
player.autoSize = art.option.autoSize;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWebChange', false);
|
||||
art.emit('fullscreenWeb');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1864,14 +1859,14 @@
|
||||
var scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
|
||||
setStyle($player, 'transform', "rotate(90deg) scale(".concat(scale, ",").concat(scale, ")"));
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenRotateChange', true);
|
||||
art.emit('fullscreenRotate', true);
|
||||
}
|
||||
} else {
|
||||
removeClass($container, 'art-fullscreen-rotate');
|
||||
player.autoSize = art.option.autoSize;
|
||||
setStyle($player, 'transform', null);
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenRotateChange', false);
|
||||
art.emit('fullscreenRotate');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1908,10 +1903,10 @@
|
||||
}
|
||||
});
|
||||
proxy($video, 'enterpictureinpicture', function () {
|
||||
art.emit('pipChange', true);
|
||||
art.emit('pip', true);
|
||||
});
|
||||
proxy($video, 'leavepictureinpicture', function () {
|
||||
art.emit('pipChange', false);
|
||||
art.emit('pip');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1925,10 +1920,10 @@
|
||||
set: function set(value) {
|
||||
if (value) {
|
||||
$video.webkitSetPresentationMode('picture-in-picture');
|
||||
art.emit('pipChange', true);
|
||||
art.emit('pip', true);
|
||||
} else {
|
||||
$video.webkitSetPresentationMode('inline');
|
||||
art.emit('pipChange', false);
|
||||
art.emit('pip');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2027,7 +2022,7 @@
|
||||
setStyle($player, 'height', "".concat(_percentage, "%"));
|
||||
}
|
||||
|
||||
art.emit('autoSizeChange', {
|
||||
art.emit('autoSize', {
|
||||
width: player.width,
|
||||
height: player.height
|
||||
});
|
||||
@@ -2035,7 +2030,7 @@
|
||||
removeClass($container, 'art-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
setStyle($player, 'height', null);
|
||||
art.emit('autoSizeRemove');
|
||||
art.emit('autoSize');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2077,10 +2072,10 @@
|
||||
var flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), "'flip' only accept ".concat(flipList.toString(), " as parameters"));
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
art.emit('flip', flip);
|
||||
} else {
|
||||
delete $player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
art.emit('flip');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2179,7 +2174,7 @@
|
||||
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
art.emit('minChange', true);
|
||||
art.emit('min', true);
|
||||
} else {
|
||||
$player.style.cssText = cacheStyle;
|
||||
removeClass($player, 'art-min');
|
||||
@@ -2188,7 +2183,7 @@
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
player.autoSize = option.autoSize;
|
||||
art.emit('minChange', false);
|
||||
art.emit('min');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2214,14 +2209,14 @@
|
||||
|
||||
if (end - start >= 1) {
|
||||
interval = [start, end];
|
||||
art.emit('loopAdd', interval);
|
||||
art.emit('loop', interval);
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loopRemove');
|
||||
art.emit('loop');
|
||||
}
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loopRemove');
|
||||
art.emit('loop');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2229,7 +2224,6 @@
|
||||
if (interval.length) {
|
||||
if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
|
||||
player.seek = interval[0];
|
||||
art.emit('loopStart', interval);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2367,7 +2361,6 @@
|
||||
callback($ref, this, this.art);
|
||||
}
|
||||
|
||||
this.art.emit("".concat(this.name, "Add"), option);
|
||||
def(this, name, {
|
||||
get: function get() {
|
||||
return option;
|
||||
@@ -2389,7 +2382,7 @@
|
||||
removeClass($player, className);
|
||||
}
|
||||
|
||||
this.art.emit("".concat(this.name, "Toggle"), value);
|
||||
this.art.emit(this.name, value);
|
||||
}
|
||||
}, {
|
||||
key: "toggle",
|
||||
@@ -2419,7 +2412,7 @@
|
||||
proxy($control, 'click', function () {
|
||||
player.fullscreenToggle = true;
|
||||
});
|
||||
art.on('fullscreenChange', function (value) {
|
||||
art.on('fullscreen', function (value) {
|
||||
tooltip($control, i18n.get(value ? 'Exit fullscreen' : 'Fullscreen'));
|
||||
});
|
||||
}
|
||||
@@ -2443,7 +2436,7 @@
|
||||
proxy($control, 'click', function () {
|
||||
player.fullscreenWebToggle = true;
|
||||
});
|
||||
art.on('fullscreenWebChange', function (value) {
|
||||
art.on('fullscreenWeb', function (value) {
|
||||
tooltip($control, i18n.get(value ? 'Exit web fullscreen' : 'Web fullscreen'));
|
||||
});
|
||||
}
|
||||
@@ -2467,7 +2460,7 @@
|
||||
proxy($control, 'click', function () {
|
||||
player.pipToggle = true;
|
||||
});
|
||||
art.on('pipChange', function (value) {
|
||||
art.on('pip', function (value) {
|
||||
tooltip($control, i18n.get(value ? 'Exit PIP mode' : 'PIP mode'));
|
||||
});
|
||||
}
|
||||
@@ -2684,7 +2677,7 @@
|
||||
proxy($control, 'click', function () {
|
||||
subtitle.toggle = true;
|
||||
});
|
||||
art.on('subtitleToggle', function (value) {
|
||||
art.on('subtitle', function (value) {
|
||||
tooltip($control, i18n.get(value ? 'Hide subtitle' : 'Show subtitle'));
|
||||
});
|
||||
}
|
||||
@@ -2815,7 +2808,7 @@
|
||||
proxy($control, 'click', function () {
|
||||
setting.toggle = true;
|
||||
});
|
||||
art.on('settingToggle', function (value) {
|
||||
art.on('setting', function (value) {
|
||||
tooltip($control, i18n.get(value ? 'Hide setting' : 'Show setting'));
|
||||
});
|
||||
}
|
||||
@@ -2958,13 +2951,14 @@
|
||||
var player = art.player;
|
||||
var $left = append($control, "<span class=\"art-loop-point\"></span>");
|
||||
var $right = append($control, "<span class=\"art-loop-point\"></span>");
|
||||
art.on('loopAdd', function (value) {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($left, 'left', "calc(".concat(value[0] / player.duration * 100, "% - ").concat($left.clientWidth, "px)"));
|
||||
setStyle($right, 'left', "".concat(value[1] / player.duration * 100, "%"));
|
||||
});
|
||||
art.on('loopRemove', function () {
|
||||
setStyle($control, 'display', 'none');
|
||||
art.on('loop', function (value) {
|
||||
if (value) {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($left, 'left', "calc(".concat(value[0] / player.duration * 100, "% - ").concat($left.clientWidth, "px)"));
|
||||
setStyle($right, 'left', "".concat(value[1] / player.duration * 100, "%"));
|
||||
} else {
|
||||
setStyle($control, 'display', 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -3152,7 +3146,7 @@
|
||||
}
|
||||
},
|
||||
mounted: function mounted($menu) {
|
||||
art.on('playbackRateChange', function (rate) {
|
||||
art.on('playbackRate', function (rate) {
|
||||
var $current = queryAll('span', $menu).find(function (item) {
|
||||
return Number(item.dataset.rate) === rate;
|
||||
});
|
||||
@@ -3184,7 +3178,7 @@
|
||||
}
|
||||
},
|
||||
mounted: function mounted($menu) {
|
||||
art.on('aspectRatioChange', function (ratio) {
|
||||
art.on('aspectRatio', function (ratio) {
|
||||
var $current = queryAll('span', $menu).find(function (item) {
|
||||
return item.dataset.ratio === ratio;
|
||||
});
|
||||
@@ -3220,7 +3214,7 @@
|
||||
|
||||
function version(option) {
|
||||
return _objectSpread$h({}, option, {
|
||||
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 3.5.5</a>'
|
||||
html: '<a href="https://artplayer.org" target="_blank">ArtPlayer 3.5.8</a>'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3403,7 +3397,7 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
art.on('infoToggle', function (value) {
|
||||
art.on('info', function (value) {
|
||||
clearTimeout(timer);
|
||||
|
||||
if (value) {
|
||||
@@ -3519,9 +3513,6 @@
|
||||
return subUrl;
|
||||
}).catch(function (err) {
|
||||
notice.show = err;
|
||||
|
||||
_this3.art.emit('subtitleErr', err);
|
||||
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
@@ -3567,13 +3558,15 @@
|
||||
$player = art.template.$player;
|
||||
events.hover($player, function () {
|
||||
addClass($player, 'art-hover');
|
||||
art.emit('hoverenter');
|
||||
art.emit('hover', true);
|
||||
}, function () {
|
||||
removeClass($player, 'art-hover');
|
||||
art.emit('hoverleave');
|
||||
art.emit('hover');
|
||||
});
|
||||
art.on('hoverleave', function () {
|
||||
controls.delayHide();
|
||||
art.on('hover', function (value) {
|
||||
if (!value) {
|
||||
controls.delayHide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4009,7 +4002,7 @@
|
||||
}
|
||||
},
|
||||
mounted: function mounted($setting) {
|
||||
art.on('flipChange', function (flip) {
|
||||
art.on('flip', function (flip) {
|
||||
var $current = queryAll('button', $setting).find(function (item) {
|
||||
return item.dataset.value === flip;
|
||||
});
|
||||
@@ -4040,7 +4033,7 @@
|
||||
}
|
||||
},
|
||||
mounted: function mounted($setting) {
|
||||
art.on('aspectRatioChange', function (ratio) {
|
||||
art.on('aspectRatio', function (ratio) {
|
||||
var $current = queryAll('button', $setting).find(function (item) {
|
||||
return item.dataset.value === ratio;
|
||||
});
|
||||
@@ -4072,8 +4065,8 @@
|
||||
$value.innerText = value;
|
||||
player.playbackRate = Number(value);
|
||||
});
|
||||
art.on('playbackRateChange', function (rate) {
|
||||
if ($range.value !== rate) {
|
||||
art.on('playbackRate', function (rate) {
|
||||
if (rate && $range.value !== rate) {
|
||||
$range.value = rate;
|
||||
$value.innerText = rate;
|
||||
}
|
||||
@@ -4394,7 +4387,7 @@
|
||||
background: theme
|
||||
},
|
||||
mounted: function mounted($progressBar) {
|
||||
art.on('controlToggle', function (value) {
|
||||
art.on('control', function (value) {
|
||||
$progressBar.style.display = value ? 'none' : 'block';
|
||||
});
|
||||
art.on('destroy', function () {
|
||||
@@ -4514,7 +4507,7 @@
|
||||
def(this, pluginName, {
|
||||
value: result
|
||||
});
|
||||
this.art.emit('pluginAdd', plugin);
|
||||
this.art.emit('plugin', plugin);
|
||||
return this;
|
||||
}
|
||||
}]);
|
||||
@@ -4562,7 +4555,7 @@
|
||||
art.emit('customType', typeName);
|
||||
} else {
|
||||
$video.src = option.url;
|
||||
art.emit('urlChange', $video.src);
|
||||
art.emit('url', $video.src);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -4634,7 +4627,7 @@
|
||||
}, {
|
||||
key: "version",
|
||||
get: function get() {
|
||||
return '3.5.5';
|
||||
return '3.5.8';
|
||||
}
|
||||
}, {
|
||||
key: "env",
|
||||
@@ -4735,7 +4728,7 @@
|
||||
|
||||
return Artplayer;
|
||||
}(Emitter); // eslint-disable-next-line no-console
|
||||
console.log('%c ArtPlayer %c 3.5.5 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
|
||||
console.log('%c ArtPlayer %c 3.5.8 %c https://artplayer.org', 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', '');
|
||||
|
||||
return Artplayer;
|
||||
|
||||
|
||||
@@ -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/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","../../node_modules/@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/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/minMix.js","../../packages/artplayer/src/player/loopMin.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","../../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/loop.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/gestureInLine 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","../../node_modules/@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/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/minMix.js","../../packages/artplayer/src/player/loopMin.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","../../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/loop.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/gestureInLine truncated
|
||||
@@ -1,7 +1,7 @@
|
||||
import { inverseClass, queryAll } from '../utils';
|
||||
|
||||
export default function aspectRatio(option) {
|
||||
return art => {
|
||||
return (art) => {
|
||||
const { i18n, player } = art;
|
||||
return {
|
||||
...option,
|
||||
@@ -17,9 +17,9 @@ export default function aspectRatio(option) {
|
||||
contextmenu.show = false;
|
||||
}
|
||||
},
|
||||
mounted: $menu => {
|
||||
art.on('aspectRatioChange', ratio => {
|
||||
const $current = queryAll('span', $menu).find(item => item.dataset.ratio === ratio);
|
||||
mounted: ($menu) => {
|
||||
art.on('aspectRatio', (ratio) => {
|
||||
const $current = queryAll('span', $menu).find((item) => item.dataset.ratio === ratio);
|
||||
if ($current) {
|
||||
inverseClass($current, 'art-current');
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { inverseClass, queryAll } from '../utils';
|
||||
|
||||
export default function playbackRate(option) {
|
||||
return art => {
|
||||
return (art) => {
|
||||
const { i18n, player } = art;
|
||||
return {
|
||||
...option,
|
||||
@@ -20,9 +20,9 @@ export default function playbackRate(option) {
|
||||
contextmenu.show = false;
|
||||
}
|
||||
},
|
||||
mounted: $menu => {
|
||||
art.on('playbackRateChange', rate => {
|
||||
const $current = queryAll('span', $menu).find(item => Number(item.dataset.rate) === rate);
|
||||
mounted: ($menu) => {
|
||||
art.on('playbackRate', (rate) => {
|
||||
const $current = queryAll('span', $menu).find((item) => Number(item.dataset.rate) === rate);
|
||||
if ($current) {
|
||||
inverseClass($current, 'art-current');
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function fullscreen(option) {
|
||||
player.fullscreenToggle = true;
|
||||
});
|
||||
|
||||
art.on('fullscreenChange', value => {
|
||||
art.on('fullscreen', value => {
|
||||
tooltip($control, i18n.get(value ? 'Exit fullscreen' : 'Fullscreen'));
|
||||
});
|
||||
},
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function fullscreenWeb(option) {
|
||||
player.fullscreenWebToggle = true;
|
||||
});
|
||||
|
||||
art.on('fullscreenWebChange', value => {
|
||||
art.on('fullscreenWeb', value => {
|
||||
tooltip($control, i18n.get(value ? 'Exit web fullscreen' : 'Web fullscreen'));
|
||||
});
|
||||
},
|
||||
|
||||
@@ -9,14 +9,14 @@ export default function loop(option) {
|
||||
const $left = append($control, `<span class="art-loop-point"></span>`);
|
||||
const $right = append($control, `<span class="art-loop-point"></span>`);
|
||||
|
||||
art.on('loopAdd', (value) => {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
|
||||
setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
|
||||
});
|
||||
|
||||
art.on('loopRemove', () => {
|
||||
setStyle($control, 'display', 'none');
|
||||
art.on('loop', (value) => {
|
||||
if (value) {
|
||||
setStyle($control, 'display', 'block');
|
||||
setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
|
||||
setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
|
||||
} else {
|
||||
setStyle($control, 'display', 'none');
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function pip(option) {
|
||||
player.pipToggle = true;
|
||||
});
|
||||
|
||||
art.on('pipChange', (value) => {
|
||||
art.on('pip', (value) => {
|
||||
tooltip($control, i18n.get(value ? 'Exit PIP mode' : 'PIP mode'));
|
||||
});
|
||||
},
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function setting(option) {
|
||||
setting.toggle = true;
|
||||
});
|
||||
|
||||
art.on('settingToggle', value => {
|
||||
art.on('setting', value => {
|
||||
tooltip($control, i18n.get(value ? 'Hide setting' : 'Show setting'));
|
||||
});
|
||||
},
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function subtitle(option) {
|
||||
subtitle.toggle = true;
|
||||
});
|
||||
|
||||
art.on('subtitleToggle', value => {
|
||||
art.on('subtitle', value => {
|
||||
tooltip($control, i18n.get(value ? 'Hide subtitle' : 'Show subtitle'));
|
||||
});
|
||||
},
|
||||
|
||||
@@ -10,15 +10,17 @@ export default function hoverInit(art, events) {
|
||||
$player,
|
||||
() => {
|
||||
addClass($player, 'art-hover');
|
||||
art.emit('hoverenter');
|
||||
art.emit('hover', true);
|
||||
},
|
||||
() => {
|
||||
removeClass($player, 'art-hover');
|
||||
art.emit('hoverleave');
|
||||
art.emit('hover');
|
||||
},
|
||||
);
|
||||
|
||||
art.on('hoverleave', () => {
|
||||
controls.delayHide();
|
||||
art.on('hover', (value) => {
|
||||
if (!value) {
|
||||
controls.delayHide();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -33,7 +33,7 @@ export default class Info extends Component {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
art.on('infoToggle', value => {
|
||||
art.on('info', value => {
|
||||
clearTimeout(timer);
|
||||
if (value) {
|
||||
loop();
|
||||
|
||||
@@ -44,7 +44,7 @@ export default class Mobile {
|
||||
art.emit('customType', typeName);
|
||||
} else {
|
||||
$video.src = option.url;
|
||||
art.emit('urlChange', $video.src);
|
||||
art.emit('url', $video.src);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,13 +42,13 @@ export default function aspectRatioMix(art, player) {
|
||||
|
||||
$player.dataset.aspectRatio = ratio;
|
||||
notice.show = `${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`;
|
||||
art.emit('aspectRatioChange', ratio);
|
||||
art.emit('aspectRatio', ratio);
|
||||
} else if (player.aspectRatio) {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
art.emit('aspectRatioRemove');
|
||||
art.emit('aspectRatio');
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -58,7 +58,6 @@ export default function aspectRatioMix(art, player) {
|
||||
if (value && player.aspectRatio) {
|
||||
const { aspectRatio } = player;
|
||||
player.aspectRatio = aspectRatio;
|
||||
art.emit('aspectRatioReset');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function resizeMix(art, player) {
|
||||
setStyle($player, 'width', '100%');
|
||||
setStyle($player, 'height', `${percentage}%`);
|
||||
}
|
||||
art.emit('autoSizeChange', {
|
||||
art.emit('autoSize', {
|
||||
width: player.width,
|
||||
height: player.height,
|
||||
});
|
||||
@@ -31,7 +31,7 @@ export default function resizeMix(art, player) {
|
||||
removeClass($container, 'art-auto-size');
|
||||
setStyle($player, 'width', null);
|
||||
setStyle($player, 'height', null);
|
||||
art.emit('autoSizeRemove');
|
||||
art.emit('autoSize');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -4,8 +4,7 @@ export default function exclusiveInit(art, player) {
|
||||
const props = ['min', 'pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
|
||||
|
||||
props.forEach((name) => {
|
||||
const event = `${name}Change`;
|
||||
art.on(event, (state) => {
|
||||
art.on(name, (state) => {
|
||||
if (state) {
|
||||
props
|
||||
.filter((item) => item !== name)
|
||||
|
||||
@@ -11,10 +11,10 @@ export default function flipMix(art, player) {
|
||||
const flipList = ['normal', 'horizontal', 'vertical'];
|
||||
errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
|
||||
$player.dataset.flip = flip;
|
||||
art.emit('flipChange', flip);
|
||||
art.emit('flip', flip);
|
||||
} else {
|
||||
delete $player.dataset.flip;
|
||||
art.emit('flipRemove');
|
||||
art.emit('flip');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function fullscreenMix(art, player) {
|
||||
addClass($player, 'art-fullscreen');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenChange', true);
|
||||
art.emit('fullscreen', true);
|
||||
});
|
||||
} else {
|
||||
screenfull.exit().then(() => {
|
||||
@@ -22,7 +22,7 @@ export default function fullscreenMix(art, player) {
|
||||
player.aspectRatioReset = true;
|
||||
player.autoSize = art.option.autoSize;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenChange', false);
|
||||
art.emit('fullscreen');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -20,14 +20,14 @@ export default function fullscreenRotateMix(art, player) {
|
||||
const scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
|
||||
setStyle($player, 'transform', `rotate(90deg) scale(${scale},${scale})`);
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenRotateChange', true);
|
||||
art.emit('fullscreenRotate', true);
|
||||
}
|
||||
} else {
|
||||
removeClass($container, 'art-fullscreen-rotate');
|
||||
player.autoSize = art.option.autoSize;
|
||||
setStyle($player, 'transform', null);
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenRotateChange', false);
|
||||
art.emit('fullscreenRotate');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -12,13 +12,13 @@ export default function fullscreenWebMix(art, player) {
|
||||
addClass($player, 'art-fullscreen-web');
|
||||
player.aspectRatioReset = true;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWebChange', true);
|
||||
art.emit('fullscreenWeb', true);
|
||||
} else {
|
||||
removeClass($player, 'art-fullscreen-web');
|
||||
player.aspectRatioReset = true;
|
||||
player.autoSize = art.option.autoSize;
|
||||
art.emit('resize');
|
||||
art.emit('fullscreenWebChange', false);
|
||||
art.emit('fullscreenWeb');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -10,14 +10,14 @@ export default function loopMin(art, player) {
|
||||
const end = clamp(value[1], start, player.duration);
|
||||
if (end - start >= 1) {
|
||||
interval = [start, end];
|
||||
art.emit('loopAdd', interval);
|
||||
art.emit('loop', interval);
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loopRemove');
|
||||
art.emit('loop');
|
||||
}
|
||||
} else {
|
||||
interval = [];
|
||||
art.emit('loopRemove');
|
||||
art.emit('loop');
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -26,7 +26,6 @@ export default function loopMin(art, player) {
|
||||
if (interval.length) {
|
||||
if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
|
||||
player.seek = interval[0];
|
||||
art.emit('loopStart', interval);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -79,7 +79,7 @@ export default function minMix(art, player) {
|
||||
}
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
art.emit('minChange', true);
|
||||
art.emit('min', true);
|
||||
} else {
|
||||
$player.style.cssText = cacheStyle;
|
||||
removeClass($player, 'art-min');
|
||||
@@ -88,7 +88,7 @@ export default function minMix(art, player) {
|
||||
player.aspectRatio = false;
|
||||
player.playbackRate = false;
|
||||
player.autoSize = option.autoSize;
|
||||
art.emit('minChange', false);
|
||||
art.emit('min');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -29,11 +29,11 @@ function nativePip(art, player) {
|
||||
});
|
||||
|
||||
proxy($video, 'enterpictureinpicture', () => {
|
||||
art.emit('pipChange', true);
|
||||
art.emit('pip', true);
|
||||
});
|
||||
|
||||
proxy($video, 'leavepictureinpicture', () => {
|
||||
art.emit('pipChange', false);
|
||||
art.emit('pip');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -49,10 +49,10 @@ function webkitPip(art, player) {
|
||||
set(value) {
|
||||
if (value) {
|
||||
$video.webkitSetPresentationMode('picture-in-picture');
|
||||
art.emit('pipChange', true);
|
||||
art.emit('pip', true);
|
||||
} else {
|
||||
$video.webkitSetPresentationMode('inline');
|
||||
art.emit('pipChange', false);
|
||||
art.emit('pip');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -19,11 +19,11 @@ export default function playbackRateMix(art, player) {
|
||||
$video.playbackRate = rate;
|
||||
$player.dataset.playbackRate = rate;
|
||||
notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
|
||||
art.emit('playbackRateChange', rate);
|
||||
art.emit('playbackRate', rate);
|
||||
} else if (player.playbackRate) {
|
||||
player.playbackRate = 1;
|
||||
delete $player.dataset.playbackRate;
|
||||
art.emit('playbackRateRemove');
|
||||
art.emit('playbackRate');
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -34,7 +34,6 @@ export default function playbackRateMix(art, player) {
|
||||
const { playbackRate } = $player.dataset;
|
||||
if (playbackRate) {
|
||||
player.playbackRate = Number(playbackRate);
|
||||
art.emit('playbackRateReset');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { secondToTime, downloadFile, def } from '../utils';
|
||||
import { secondToTime, download, def } from '../utils';
|
||||
|
||||
export default function screenshotMix(art, player) {
|
||||
const {
|
||||
@@ -7,30 +7,31 @@ export default function screenshotMix(art, player) {
|
||||
template: { $video },
|
||||
} = art;
|
||||
|
||||
def(player, 'getScreenshotDataURL', {
|
||||
value: () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
return canvas.toDataURL('image/png');
|
||||
} catch (err) {
|
||||
notice.show = err;
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
});
|
||||
const $canvas = document.createElement('canvas');
|
||||
|
||||
def(player, 'getScreenshotBlobUrl', {
|
||||
def(player, 'getDataURL', {
|
||||
value: () =>
|
||||
new Promise((resolve, reject) => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = $video.videoWidth;
|
||||
canvas.height = $video.videoHeight;
|
||||
canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
canvas.toBlob(blob => {
|
||||
$canvas.width = $video.videoWidth;
|
||||
$canvas.height = $video.videoHeight;
|
||||
$canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
resolve($canvas.toDataURL('image/png'));
|
||||
} catch (err) {
|
||||
notice.show = err;
|
||||
reject(err);
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
def(player, 'getBlobUrl', {
|
||||
value: () =>
|
||||
new Promise((resolve, reject) => {
|
||||
try {
|
||||
$canvas.width = $video.videoWidth;
|
||||
$canvas.height = $video.videoHeight;
|
||||
$canvas.getContext('2d').drawImage($video, 0, 0);
|
||||
$canvas.toBlob((blob) => {
|
||||
resolve(URL.createObjectURL(blob));
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -42,11 +43,10 @@ export default function screenshotMix(art, player) {
|
||||
|
||||
def(player, 'screenshot', {
|
||||
value: () => {
|
||||
const dataUri = player.getScreenshotDataURL();
|
||||
if (dataUri) {
|
||||
downloadFile(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
|
||||
player.getDataURL().then((dataUri) => {
|
||||
download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
|
||||
art.emit('screenshot', dataUri);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -17,12 +17,11 @@ export default function urlMix(art, player) {
|
||||
sleep().then(() => {
|
||||
art.loading.show = true;
|
||||
typeCallback.call(art, $video, url, art);
|
||||
art.emit('customType', typeName);
|
||||
});
|
||||
} else {
|
||||
$video.src = url;
|
||||
art.option.url = url;
|
||||
art.emit('urlChange', url);
|
||||
art.emit('url', url);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -45,7 +45,7 @@ export default class Plugins {
|
||||
def(this, pluginName, {
|
||||
value: result,
|
||||
});
|
||||
this.art.emit('pluginAdd', plugin);
|
||||
this.art.emit('plugin', plugin);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export default function miniProgressBar(art) {
|
||||
background: theme,
|
||||
},
|
||||
mounted($progressBar) {
|
||||
art.on('controlToggle', value => {
|
||||
art.on('control', value => {
|
||||
$progressBar.style.display = value ? 'none' : 'block';
|
||||
});
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function aspectRatio(option) {
|
||||
}
|
||||
},
|
||||
mounted: $setting => {
|
||||
art.on('aspectRatioChange', ratio => {
|
||||
art.on('aspectRatio', ratio => {
|
||||
const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio);
|
||||
if ($current) {
|
||||
inverseClass($current.parentElement, 'current');
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function flip(option) {
|
||||
}
|
||||
},
|
||||
mounted: $setting => {
|
||||
art.on('flipChange', flip => {
|
||||
art.on('flip', flip => {
|
||||
const $current = queryAll('button', $setting).find(item => item.dataset.value === flip);
|
||||
if ($current) {
|
||||
inverseClass($current.parentElement, 'current');
|
||||
|
||||
@@ -26,8 +26,8 @@ export default function playbackRate(option) {
|
||||
player.playbackRate = Number(value);
|
||||
});
|
||||
|
||||
art.on('playbackRateChange', rate => {
|
||||
if ($range.value !== rate) {
|
||||
art.on('playbackRate', rate => {
|
||||
if (rate && $range.value !== rate) {
|
||||
$range.value = rate;
|
||||
$value.innerText = rate;
|
||||
}
|
||||
|
||||
@@ -94,7 +94,6 @@ export default class Subtitle extends Component {
|
||||
})
|
||||
.catch((err) => {
|
||||
notice.show = err;
|
||||
this.art.emit('subtitleErr', err);
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default class Component {
|
||||
} else {
|
||||
removeClass($player, className);
|
||||
}
|
||||
this.art.emit(`${this.name}Toggle`, value);
|
||||
this.art.emit(this.name, value);
|
||||
}
|
||||
|
||||
set toggle(value) {
|
||||
@@ -53,7 +53,7 @@ export default class Component {
|
||||
|
||||
const childs = Array.from(this.$parent.children);
|
||||
$ref.dataset.index = option.index || this.id;
|
||||
const nextChild = childs.find(item => Number(item.dataset.index) >= Number($ref.dataset.index));
|
||||
const nextChild = childs.find((item) => Number(item.dataset.index) >= Number($ref.dataset.index));
|
||||
if (nextChild) {
|
||||
nextChild.insertAdjacentElement('beforebegin', $ref);
|
||||
} else {
|
||||
@@ -61,7 +61,7 @@ export default class Component {
|
||||
}
|
||||
|
||||
if (option.click) {
|
||||
this.art.events.proxy($ref, 'click', event => {
|
||||
this.art.events.proxy($ref, 'click', (event) => {
|
||||
event.preventDefault();
|
||||
option.click.call(this.art, this, event);
|
||||
});
|
||||
@@ -75,8 +75,6 @@ export default class Component {
|
||||
callback($ref, this, this.art);
|
||||
}
|
||||
|
||||
this.art.emit(`${this.name}Add`, option);
|
||||
|
||||
def(this, name, {
|
||||
get: () => option,
|
||||
});
|
||||
|
||||
@@ -7,14 +7,10 @@ export function getExt(url) {
|
||||
return getExt(url.split('#')[0]);
|
||||
}
|
||||
|
||||
return url
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.split('.')
|
||||
.pop();
|
||||
return url.trim().toLowerCase().split('.').pop();
|
||||
}
|
||||
|
||||
export function downloadFile(url, name) {
|
||||
export function download(url, name) {
|
||||
const elink = document.createElement('a');
|
||||
elink.style.display = 'none';
|
||||
elink.href = url;
|
||||
|
||||
Reference in new issue
Block a user