x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-25 08:01:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

简化事件

Browse Source
This commit is contained in:
Harvey committed 2020-05-22 13:23:28 +08:00
1 parent 938b90f3a7
commit 4718cd186b
36 files changed
+223 -250
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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