diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index 971eb74ff..e8128160a 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -7,7 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
- 新增 `option.proxy` 选项，用于代理第三方的 `video` 和 `canvas`
-- 新增 `artplayer-proxy-canvas` 代理
+- 新增 `artplayer-proxy-canvas` 代理，可以使用 `canvas` 播放视频
- 新增 `artplayer-proxy-webav` 代理，来自 [bilibili/WebAV](https://github.com/bilibili/WebAV)
- 新增 `option.thumbnails.scale`, 用于预览图缩放
- 修复更改 `art.url` 不能触发 `autoPlayBack` 的 `bug`: [#797](https://github.com/zhw2590582/ArtPlayer/issues/797)
@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- 修改 `subtitleUpdate` 事件为 `subtitleAfterUpdate`, 在字幕元素渲染后触发
- 优化 `subtitleLoad` 事件的触发时机和回调参数
- 删除 `subtitleSwitch` 事件，请使用 `subtitleLoad` 代替
+- 升级 `artplayer-plugin-hls-quality` 为 `artplayer-plugin-hls-control`
## [5.1.7] - 2024-8-15
diff --git a/README.md b/README.md
index d3084fdd5..88951203a 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ var art = new Artplayer({
- [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
- [artplayer-plugin-ads](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads) (WIP)
- [artplayer-plugin-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
-- [artplayer-plugin-hls-quality](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+- [artplayer-plugin-hls-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control)
- [artplayer-plugin-dash-quality](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
- [artplayer-plugin-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail)
- [artplayer-plugin-multiple-subtitles](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles)
diff --git a/docs/assets/example/hls.control.js b/docs/assets/example/hls.control.js
new file mode 100644
index 000000000..c04d5b631
--- /dev/null
+++ b/docs/assets/example/hls.control.js
@@ -0,0 +1,53 @@
+// npm i hls.js
+// npm i artplayer-plugin-hls-control
+
+// import Hls from 'hls.js';
+// import artplayerPluginHlsControl from 'artplayer-plugin-hls-control';
+
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+ setting: true,
+ plugins: [
+ artplayerPluginHlsControl({
+ quality: {
+ // Show qualitys in control
+ control: true,
+ // Show qualitys in setting
+ setting: true,
+ // Get the quality name from level
+ getName: (level) => level.height + 'P',
+ // I18n
+ title: 'Quality',
+ auto: 'Auto',
+ },
+ audio: {
+ // Show audios in control
+ control: true,
+ // Show audios in setting
+ setting: true,
+ // Get the audio name from track
+ getName: (track) => track.name,
+ // I18n
+ title: 'Audio',
+ auto: 'Auto',
+ }
+ }),
+ ],
+ customType: {
+ m3u8: function playM3u8(video, url, art) {
+ if (Hls.isSupported()) {
+ if (art.hls) art.hls.destroy();
+ const hls = new Hls();
+ hls.loadSource(url);
+ hls.attachMedia(video);
+ art.hls = hls;
+ art.on('destroy', () => hls.destroy());
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+ video.src = url;
+ } else {
+ art.notice.show = 'Unsupported playback format: m3u8';
+ }
+ }
+ },
+});
diff --git a/docs/assets/example/hls.quality.js b/docs/assets/example/hls.quality.js
deleted file mode 100644
index f6709e3e4..000000000
--- a/docs/assets/example/hls.quality.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// npm i hls.js
-// npm i artplayer-plugin-hls-quality
-
-// import Hls from 'hls.js';
-// import artplayerPluginHlsQuality from 'artplayer-plugin-hls-quality';
-
-var art = new Artplayer({
- container: '.artplayer-app',
- url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
- setting: true,
- plugins: [
- artplayerPluginHlsQuality({
- // Show quality in control
- control: true,
-
- // Show quality in setting
- setting: true,
-
- // Get the resolution text from level
- getResolution: (level) => level.height + 'P',
-
- // I18n
- title: 'Quality',
- auto: 'Auto',
- }),
- ],
- customType: {
- m3u8: function playM3u8(video, url, art) {
- if (Hls.isSupported()) {
- if (art.hls) art.hls.destroy();
- const hls = new Hls();
- hls.loadSource(url);
- hls.attachMedia(video);
- art.hls = hls;
- art.on('destroy', () => hls.destroy());
- } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
- video.src = url;
- } else {
- art.notice.show = 'Unsupported playback format: m3u8';
- }
- }
- },
-});
diff --git a/docs/index.html b/docs/index.html
index d99321ad3..645e28f58 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -65,7 +65,7 @@
artplayer-plugin-hls-quality
+ href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control">artplayer-plugin-hls-control
",
"browserslist": "last 1 Chrome version",
"homepage": "https://artplayer.org",
diff --git a/packages/artplayer-plugin-hls-quality/src/index.js b/packages/artplayer-plugin-hls-control/src/index.js
similarity index 73%
rename from packages/artplayer-plugin-hls-quality/src/index.js
rename to packages/artplayer-plugin-hls-control/src/index.js
index f85e66917..3f9f2d0d3 100644
--- a/packages/artplayer-plugin-hls-quality/src/index.js
+++ b/packages/artplayer-plugin-hls-control/src/index.js
@@ -1,24 +1,24 @@
import $quality from 'bundle-text:./quality.svg';
-export default function artplayerPluginHlsQuality(option) {
+export default function artplayerPluginHlsControl(option = {}) {
return (art) => {
const { $video } = art.template;
const { errorHandle } = art.constructor.utils;
function updateQuality(hls) {
- const auto = option.auto || 'Auto';
- const title = option.title || 'Quality';
-
- const getResolution = option.getResolution || ((level) => (level.height || 'Unknown ') + 'P');
+ const config = option.quality || {};
+ const auto = config.auto || 'Auto';
+ const title = config.title || 'Quality';
+ const getName = config.getName || ((level) => (level.height || 'Unknown ') + 'P');
const defaultLevel = hls.levels[hls.currentLevel];
- const defaultHtml = defaultLevel ? getResolution(defaultLevel) : auto;
+ const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;
const selector = hls.levels
.map((item, index) => {
return {
- html: getResolution(item),
+ html: getName(item, index),
level: item.level || index,
- default: defaultLevel === item,
+ default: hls.currentLevel === index,
};
})
.sort((a, b) => b.level - a.level);
@@ -26,7 +26,7 @@ export default function artplayerPluginHlsQuality(option) {
selector.push({
html: auto,
level: -1,
- default: defaultLevel === -1,
+ default: hls.currentLevel === -1,
});
const onSelect = (item) => {
@@ -36,7 +36,7 @@ export default function artplayerPluginHlsQuality(option) {
return item.html;
};
- if (option.control) {
+ if (config.control) {
art.controls.update({
name: 'hls-quality',
position: 'right',
@@ -47,7 +47,7 @@ export default function artplayerPluginHlsQuality(option) {
});
}
- if (option.setting) {
+ if (config.setting) {
art.setting.update({
name: 'hls-quality',
tooltip: defaultHtml,
@@ -75,12 +75,12 @@ export default function artplayerPluginHlsQuality(option) {
art.on('restart', update);
return {
- name: 'artplayerPluginHlsQuality',
+ name: 'artplayerPluginHlsControl',
update,
};
};
}
if (typeof window !== 'undefined') {
- window['artplayerPluginHlsQuality'] = artplayerPluginHlsQuality;
+ window['artplayerPluginHlsControl'] = artplayerPluginHlsControl;
}
diff --git a/packages/artplayer-plugin-hls-quality/src/quality.svg b/packages/artplayer-plugin-hls-control/src/quality.svg
similarity index 100%
rename from packages/artplayer-plugin-hls-quality/src/quality.svg
rename to packages/artplayer-plugin-hls-control/src/quality.svg
diff --git a/packages/artplayer-plugin-hls-control/types/artplayer-plugin-hls-control.d.ts b/packages/artplayer-plugin-hls-control/types/artplayer-plugin-hls-control.d.ts
new file mode 100644
index 000000000..8bf8f1054
--- /dev/null
+++ b/packages/artplayer-plugin-hls-control/types/artplayer-plugin-hls-control.d.ts
@@ -0,0 +1,24 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginHlsControl;
+export as namespace artplayerPluginHlsControl;
+
+declare const artplayerPluginHlsControl: (option: {
+ quality?: {
+ control?: boolean;
+ setting?: boolean;
+ title?: string;
+ auto?: string;
+ getName?(level: object): String;
+ };
+ audio?: {
+ control?: boolean;
+ setting?: boolean;
+ title?: string;
+ auto?: string;
+ getName?(level: object): String;
+ };
+}) => (art: Artplayer) => {
+ name: 'artplayerPluginHlsControl';
+ update: () => void;
+};
diff --git a/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js b/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
deleted file mode 100644
index 7c7e0d9c7..000000000
--- a/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+++ /dev/null
@@ -1 +0,0 @@
-/*! * artplayer-plugin-hls-quality.js v2.0.0 * Github:https://github.com/zhw2590582/ArtPlayer * (c) 2017-2024 Harvey Zack * Released under the MIT License. */ !function(e,t,n,o,l){var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof r[o]&&r[o],u=i.cache||{},a="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,n){if(!u[t]){if(!e[t]){var l="function"==typeof r[o]&&r[o];if(!n&&l)return l(t,!0);if(i)return i(t,!0);if(a&&"string"==typeof t)return a(t);var s=Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},d.cache={};var c=u[t]=new f.Module(t);e[t][0].call(c.exports,d,c,c.exports,this)}return u[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:f(t)}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=u,f.parent=i,f.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(f,"root",{get:function(){return r[o]}}),r[o]=f;for(var s=0;si);var l=e("bundle-text:./image.svg"),r=o.interopDefault(l);function i(e){return t=>{!function(e){let{version:t,utils:{errorHandle:n}}=e.constructor,o=t.split(".").map(Number);n(o[0]+o[1]/100>=5,`Artplayer.js@${t}is not compatible the artplayerPluginHlsQuality@${i.version}. Please update it to version Artplayer.js@5.x.x`)}(t);let{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;function l(){let l=t.hls||window.hls;o(l&&l.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');let i=e.auto||"Auto",u=e.title||"Quality",a=e.getResolution||(e=>(e.height||"Unknown ")+"P"),f=l.levels[l.currentLevel],s=f?a(f):i;e.control&&t.controls.update({name:"hls-quality",position:"right",html:s,style:{padding:"0 10px"},selector:l.levels.map((e,t)=>({html:a(e),level:e.level||t,default:f===e})),onSelect:e=>(l.currentLevel=e.level,t.loading.show=!0,e.html)}),e.setting&&t.setting.update({name:"hls-quality",tooltip:s,html:u,icon:r.default,width:200,selector:l.levels.map((e,t)=>({html:a(e),level:e.level||t,default:f===e})),onSelect:function(e){return l.currentLevel=e.level,t.loading.show=!0,e.html}})}return t.on("ready",l),t.on("restart",l),{name:"artplayerPluginHlsQuality"}}}"undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"5VXix","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"5VXix":[function(e,t,n){t.exports=''},{}],"9pCYc":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach(function(n){"default"===n||"__esModule"===n||Object.prototype.hasOwnProperty.call(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})}),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["eEHR6"],"eEHR6","parcelRequire4dc0");
\ No newline at end of file
diff --git a/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.legacy.js b/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.legacy.js
deleted file mode 100644
index ef7cb7d72..000000000
--- a/packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.legacy.js
+++ /dev/null
@@ -1 +0,0 @@
-/*! * artplayer-plugin-hls-quality.js v2.0.0 * Github:https://github.com/zhw2590582/ArtPlayer * (c) 2017-2024 Harvey Zack * Released under the MIT License. */ !function(e,t,n,r,o){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l[r]&&l[r],u=i.cache||{},a="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,n){if(!u[t]){if(!e[t]){var o="function"==typeof l[r]&&l[r];if(!n&&o)return o(t,!0);if(i)return i(t,!0);if(a&&"string"==typeof t)return a(t);var s=Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},d.cache={};var c=u[t]=new f.Module(t);e[t][0].call(c.exports,d,c,c.exports,this)}return u[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:f(t)}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=u,f.parent=i,f.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(f,"root",{get:function(){return l[r]}}),l[r]=f;for(var s=0;s=5,"Artplayer.js@".concat(r," is not compatible the artplayerPluginHlsQuality@").concat(i.version,". Please update it to version Artplayer.js@5.x.x"));var n,r,o,u=t.template.$video,a=t.constructor.utils.errorHandle;function f(){var n=t.hls||window.hls;a(n&&n.media===u,'Cannot find instance of HLS from "art.hls" or "window.hls"');var r=e.auto||"Auto",o=e.title||"Quality",i=e.getResolution||function(e){return(e.height||"Unknown ")+"P"},f=n.levels[n.currentLevel],s=f?i(f):r;e.control&&t.controls.update({name:"hls-quality",position:"right",html:s,style:{padding:"0 10px"},selector:n.levels.map(function(e,t){return{html:i(e),level:e.level||t,default:f===e}}),onSelect:function(e){return n.currentLevel=e.level,t.loading.show=!0,e.html}}),e.setting&&t.setting.update({name:"hls-quality",tooltip:s,html:o,icon:l.default,width:200,selector:n.levels.map(function(e,t){return{html:i(e),level:e.level||t,default:f===e}}),onSelect:function(e){return n.currentLevel=e.level,t.loading.show=!0,e.html}})}return t.on("ready",f),t.on("restart",f),{name:"artplayerPluginHlsQuality"}}}"undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"jPEUe","@parcel/transformer-js/src/esmodule-helpers.js":"iWrD0"}],jPEUe:[function(e,t,n){t.exports=''},{}],iWrD0:[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach(function(n){"default"===n||"__esModule"===n||Object.prototype.hasOwnProperty.call(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})}),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["34JKw"],"34JKw","parcelRequire4dc0");
\ No newline at end of file
diff --git a/packages/artplayer-plugin-hls-quality/types/artplayer-plugin-hls-quality.d.ts b/packages/artplayer-plugin-hls-quality/types/artplayer-plugin-hls-quality.d.ts
deleted file mode 100644
index 9b7c66f9b..000000000
--- a/packages/artplayer-plugin-hls-quality/types/artplayer-plugin-hls-quality.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type Artplayer from 'artplayer';
-
-export = artplayerPluginHlsQuality;
-export as namespace artplayerPluginHlsQuality;
-
-declare const artplayerPluginHlsQuality: (option: {
- control?: boolean;
- setting?: boolean;
- title?: string;
- auto?: string;
- getResolution?(level: any): String;
-}) => (art: Artplayer) => {
- name: 'artplayerPluginHlsQuality';
-};