mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
feat: add audio control feature to artplayer-plugin-hls-control, include audio.svg and update documentation
This commit is contained in:
Harvey Zack committed
1 parent
ef964c4bc0
commit
31bd66a33e
7 files changed
+365
-26
No files matched your search
+1
-1
@@ -10,7 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
- 新增 `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)
|
||||
- 修复 `art.url` 更改不能触发 `autoPlayBack` 的 `bug`: [#797](https://github.com/zhw2590582/ArtPlayer/issues/797)
|
||||
- 新增 `art.subtitle.cues` 属性, 可用于手动调整字幕对象列表
|
||||
- 新增 `subtitleBeforeUpdate` 事件, 在字幕元素渲染前触发
|
||||
- 修改 `subtitleUpdate` 事件为 `subtitleAfterUpdate`, 在字幕元素渲染后触发
|
||||
|
||||
@@ -0,0 +1,298 @@
|
||||
// modules are defined as an array
|
||||
// [ module function, map of requires ]
|
||||
//
|
||||
// map of requires is short require name -> numeric require
|
||||
//
|
||||
// anything defined in a previous bundle is accessed via the
|
||||
// orig method which is the require for previous bundles
|
||||
|
||||
(function (modules, entry, mainEntry, parcelRequireName, globalName) {
|
||||
/* eslint-disable no-undef */
|
||||
var globalObject =
|
||||
typeof globalThis !== 'undefined'
|
||||
? globalThis
|
||||
: typeof self !== 'undefined'
|
||||
? self
|
||||
: typeof window !== 'undefined'
|
||||
? window
|
||||
: typeof global !== 'undefined'
|
||||
? global
|
||||
: {};
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
// Save the require from previous bundle to this closure if any
|
||||
var previousRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
|
||||
var cache = previousRequire.cache || {};
|
||||
// Do not use `require` to prevent Webpack from trying to bundle this call
|
||||
var nodeRequire =
|
||||
typeof module !== 'undefined' &&
|
||||
typeof module.require === 'function' &&
|
||||
module.require.bind(module);
|
||||
|
||||
function newRequire(name, jumped) {
|
||||
if (!cache[name]) {
|
||||
if (!modules[name]) {
|
||||
// if we cannot find the module within our internal map or
|
||||
// cache jump to the current global require ie. the last bundle
|
||||
// that was added to the page.
|
||||
var currentRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
if (!jumped && currentRequire) {
|
||||
return currentRequire(name, true);
|
||||
}
|
||||
|
||||
// If there are other bundles on this page the require from the
|
||||
// previous one is saved to 'previousRequire'. Repeat this as
|
||||
// many times as there are bundles until the module is found or
|
||||
// we exhaust the require chain.
|
||||
if (previousRequire) {
|
||||
return previousRequire(name, true);
|
||||
}
|
||||
|
||||
// Try the node require function if it exists.
|
||||
if (nodeRequire && typeof name === 'string') {
|
||||
return nodeRequire(name);
|
||||
}
|
||||
|
||||
var err = new Error("Cannot find module '" + name + "'");
|
||||
err.code = 'MODULE_NOT_FOUND';
|
||||
throw err;
|
||||
}
|
||||
|
||||
localRequire.resolve = resolve;
|
||||
localRequire.cache = {};
|
||||
|
||||
var module = (cache[name] = new newRequire.Module(name));
|
||||
|
||||
modules[name][0].call(
|
||||
module.exports,
|
||||
localRequire,
|
||||
module,
|
||||
module.exports,
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
return cache[name].exports;
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
return res === false ? {} : newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
var id = modules[name][1][x];
|
||||
return id != null ? id : x;
|
||||
}
|
||||
}
|
||||
|
||||
function Module(moduleName) {
|
||||
this.id = moduleName;
|
||||
this.bundle = newRequire;
|
||||
this.exports = {};
|
||||
}
|
||||
|
||||
newRequire.isParcelRequire = true;
|
||||
newRequire.Module = Module;
|
||||
newRequire.modules = modules;
|
||||
newRequire.cache = cache;
|
||||
newRequire.parent = previousRequire;
|
||||
newRequire.register = function (id, exports) {
|
||||
modules[id] = [
|
||||
function (require, module) {
|
||||
module.exports = exports;
|
||||
},
|
||||
{},
|
||||
];
|
||||
};
|
||||
|
||||
Object.defineProperty(newRequire, 'root', {
|
||||
get: function () {
|
||||
return globalObject[parcelRequireName];
|
||||
},
|
||||
});
|
||||
|
||||
globalObject[parcelRequireName] = newRequire;
|
||||
|
||||
for (var i = 0; i < entry.length; i++) {
|
||||
newRequire(entry[i]);
|
||||
}
|
||||
|
||||
if (mainEntry) {
|
||||
// Expose entry point to Node, AMD or browser globals
|
||||
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
var mainExports = newRequire(mainEntry);
|
||||
|
||||
// CommonJS
|
||||
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
module.exports = mainExports;
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function () {
|
||||
return mainExports;
|
||||
});
|
||||
|
||||
// <script>
|
||||
} else if (globalName) {
|
||||
this[globalName] = mainExports;
|
||||
}
|
||||
}
|
||||
})({"4ve9y":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>artplayerPluginHlsControl);
|
||||
var _qualitySvg = require("bundle-text:./quality.svg");
|
||||
var _qualitySvgDefault = parcelHelpers.interopDefault(_qualitySvg);
|
||||
var _audioSvg = require("bundle-text:./audio.svg");
|
||||
var _audioSvgDefault = parcelHelpers.interopDefault(_audioSvg);
|
||||
function artplayerPluginHlsControl(option = {}) {
|
||||
return (art)=>{
|
||||
const { $video } = art.template;
|
||||
const { errorHandle } = art.constructor.utils;
|
||||
function updateQuality(hls) {
|
||||
if (!hls.levels.length) return;
|
||||
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 ? getName(defaultLevel) : auto;
|
||||
const selector = hls.levels.map((item, index)=>{
|
||||
return {
|
||||
html: getName(item, index),
|
||||
value: index,
|
||||
default: hls.currentLevel === index
|
||||
};
|
||||
}).sort((a, b)=>b.value - a.value);
|
||||
selector.push({
|
||||
html: auto,
|
||||
value: -1,
|
||||
default: hls.currentLevel === -1
|
||||
});
|
||||
const onSelect = (item)=>{
|
||||
hls.currentLevel = item.value;
|
||||
art.loading.show = true;
|
||||
art.notice.show = `${title}: ${item.html}`;
|
||||
return item.html;
|
||||
};
|
||||
if (config.control) art.controls.update({
|
||||
name: "hls-quality",
|
||||
position: "right",
|
||||
html: defaultHtml,
|
||||
style: {
|
||||
padding: "0 10px"
|
||||
},
|
||||
selector: selector,
|
||||
onSelect: onSelect
|
||||
});
|
||||
if (config.setting) art.setting.update({
|
||||
name: "hls-quality",
|
||||
tooltip: defaultHtml,
|
||||
html: title,
|
||||
icon: (0, _qualitySvgDefault.default),
|
||||
width: 200,
|
||||
selector: selector,
|
||||
onSelect: onSelect
|
||||
});
|
||||
}
|
||||
function updateAudio(hls) {
|
||||
if (!hls.audioTracks.length) return;
|
||||
const config = option.audio || {};
|
||||
const auto = config.auto || "Auto";
|
||||
const title = config.title || "Audio";
|
||||
const getName = config.getName || ((track, index)=>track.name || `Track ${index + 1}`);
|
||||
const defaultTrack = hls.audioTracks[hls.audioTrack];
|
||||
const defaultHtml = defaultTrack ? getName(defaultTrack) : auto;
|
||||
const selector = hls.audioTracks.map((item, index)=>{
|
||||
return {
|
||||
html: getName(item, index),
|
||||
value: index,
|
||||
default: hls.audioTrack === index
|
||||
};
|
||||
});
|
||||
const onSelect = (item)=>{
|
||||
hls.audioTrack = item.value;
|
||||
art.loading.show = true;
|
||||
art.notice.show = `${title}: ${item.html}`;
|
||||
return item.html;
|
||||
};
|
||||
if (config.control) art.controls.update({
|
||||
name: "hls-audio",
|
||||
position: "right",
|
||||
html: defaultHtml,
|
||||
style: {
|
||||
padding: "0 10px"
|
||||
},
|
||||
selector: selector,
|
||||
onSelect: onSelect
|
||||
});
|
||||
if (config.setting) art.setting.update({
|
||||
name: "hls-audio",
|
||||
tooltip: defaultHtml,
|
||||
html: title,
|
||||
icon: (0, _audioSvgDefault.default),
|
||||
width: 200,
|
||||
selector: selector,
|
||||
onSelect: onSelect
|
||||
});
|
||||
}
|
||||
function update() {
|
||||
const hls = art.hls || window.hls;
|
||||
errorHandle(hls && hls.media === $video, 'Cannot find instance of HLS from "art.hls" or "window.hls"');
|
||||
updateQuality(hls);
|
||||
updateAudio(hls);
|
||||
}
|
||||
art.on("ready", update);
|
||||
art.on("restart", update);
|
||||
return {
|
||||
name: "artplayerPluginHlsControl",
|
||||
update
|
||||
};
|
||||
};
|
||||
}
|
||||
if (typeof window !== "undefined") window["artplayerPluginHlsControl"] = artplayerPluginHlsControl;
|
||||
|
||||
},{"bundle-text:./quality.svg":"dwrS3","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","bundle-text:./audio.svg":"fK6Qz"}],"dwrS3":[function(require,module,exports) {
|
||||
module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" height=\"18\"><path fill=\"#fff\" d=\"M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z\"></path></svg>";
|
||||
|
||||
},{}],"5dUr6":[function(require,module,exports) {
|
||||
exports.interopDefault = function(a) {
|
||||
return a && a.__esModule ? a : {
|
||||
default: a
|
||||
};
|
||||
};
|
||||
exports.defineInteropFlag = function(a) {
|
||||
Object.defineProperty(a, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
};
|
||||
exports.exportAll = function(source, dest) {
|
||||
Object.keys(source).forEach(function(key) {
|
||||
if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
|
||||
Object.defineProperty(dest, key, {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return source[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
return dest;
|
||||
};
|
||||
exports.export = function(dest, destName, get) {
|
||||
Object.defineProperty(dest, destName, {
|
||||
enumerable: true,
|
||||
get: get
|
||||
});
|
||||
};
|
||||
|
||||
},{}],"fK6Qz":[function(require,module,exports) {
|
||||
module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" height=\"18\"><path fill=\"#fff\" d=\"M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80l0-16 0-48 0-48C0 146.6 114.6 32 256 32s256 114.6 256 256l0 48 0 48 0 16c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z\"></path></svg>";
|
||||
|
||||
},{}]},["4ve9y"], "4ve9y", "parcelRequire4dc0")
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"mappings":"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","sources":["packages/artplayer-plugin-hls-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-fcdfb7ede3ffa9c4.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e5365aae8b5bd745.js"],"sourcesContent":["import $quality from 'bundle-text:./quality.svg';\nimport $audio from 'bundle-text:./audio.svg';\n\nexport default function artplayerPluginHlsControl(option = {}) {\n return (art) => {\n const { $video } = art.template;\n const { errorHandle } = art.constructor.utils;\n\n function updateQuality(hls) {\n if (!hls.levels.length) return;\n\n const config = option.quality || {};\n const auto = config.auto || 'Auto';\n const title = config.title || 'Quality';\n const getName = config.getName || ((level) => (level.height || 'Unknown ') + 'P');\n const defaultLevel = hls.levels[hls.currentLevel];\n const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;\n\n const selector = hls.levels\n .map((item, index) => {\n return {\n html: getName(item, index),\n value: index,\n default: hls.currentLevel === index,\n };\n })\n .sort((a, b) => b.value - a.value);\n\n selector.push({\n html: auto,\n value: -1,\n default: hls.currentLevel === -1,\n });\n\n const onSelect = (item) => {\n hls.currentLevel = item.value;\n art.loading.show = true;\n art.notice.show = `${title}: ${item.html}`;\n Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="18"><path fill="#fff" d="M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80l0-16 0-48 0-48C0 146.6 114.6 32 256 32s256 114.6 256 256l0 48 0 48 0 16c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z"/></svg>
|
||||
|
After Width: | Height: | Size: 424 B |
@@ -1,4 +1,5 @@
|
||||
import $quality from 'bundle-text:./quality.svg';
|
||||
import $audio from 'bundle-text:./audio.svg';
|
||||
|
||||
export default function artplayerPluginHlsControl(option = {}) {
|
||||
return (art) => {
|
||||
@@ -6,6 +7,8 @@ export default function artplayerPluginHlsControl(option = {}) {
|
||||
const { errorHandle } = art.constructor.utils;
|
||||
|
||||
function updateQuality(hls) {
|
||||
if (!hls.levels.length) return;
|
||||
|
||||
const config = option.quality || {};
|
||||
const auto = config.auto || 'Auto';
|
||||
const title = config.title || 'Quality';
|
||||
@@ -17,20 +20,20 @@ export default function artplayerPluginHlsControl(option = {}) {
|
||||
.map((item, index) => {
|
||||
return {
|
||||
html: getName(item, index),
|
||||
level: item.level || index,
|
||||
value: index,
|
||||
default: hls.currentLevel === index,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.level - a.level);
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
selector.push({
|
||||
html: auto,
|
||||
level: -1,
|
||||
value: -1,
|
||||
default: hls.currentLevel === -1,
|
||||
});
|
||||
|
||||
const onSelect = (item) => {
|
||||
hls.currentLevel = item.level;
|
||||
hls.currentLevel = item.value;
|
||||
art.loading.show = true;
|
||||
art.notice.show = `${title}: ${item.html}`;
|
||||
return item.html;
|
||||
@@ -61,7 +64,52 @@ export default function artplayerPluginHlsControl(option = {}) {
|
||||
}
|
||||
|
||||
function updateAudio(hls) {
|
||||
//
|
||||
if (!hls.audioTracks.length) return;
|
||||
|
||||
const config = option.audio || {};
|
||||
const auto = config.auto || 'Auto';
|
||||
const title = config.title || 'Audio';
|
||||
const getName = config.getName || ((track, index) => track.name || `Track ${index + 1}`);
|
||||
const defaultTrack = hls.audioTracks[hls.audioTrack];
|
||||
const defaultHtml = defaultTrack ? getName(defaultTrack) : auto;
|
||||
|
||||
const selector = hls.audioTracks.map((item, index) => {
|
||||
return {
|
||||
html: getName(item, index),
|
||||
value: index,
|
||||
default: hls.audioTrack === index,
|
||||
};
|
||||
});
|
||||
|
||||
const onSelect = (item) => {
|
||||
hls.audioTrack = item.value;
|
||||
art.loading.show = true;
|
||||
art.notice.show = `${title}: ${item.html}`;
|
||||
return item.html;
|
||||
};
|
||||
|
||||
if (config.control) {
|
||||
art.controls.update({
|
||||
name: 'hls-audio',
|
||||
position: 'right',
|
||||
html: defaultHtml,
|
||||
style: { padding: '0 10px' },
|
||||
selector: selector,
|
||||
onSelect: onSelect,
|
||||
});
|
||||
}
|
||||
|
||||
if (config.setting) {
|
||||
art.setting.update({
|
||||
name: 'hls-audio',
|
||||
tooltip: defaultHtml,
|
||||
html: title,
|
||||
icon: $audio,
|
||||
width: 200,
|
||||
selector: selector,
|
||||
onSelect: onSelect,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg t="1666857514489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2580" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M870.4 176 153.6 176C104.128 176 64 216.128 64 265.6l0 492.736c0 49.472 40.128 89.6 89.6 89.6L870.4 847.936c49.472 0 89.6-40.128 89.6-89.6L960 265.6C960 216.128 919.872 176 870.4 176zM870.4 668.8 825.6 668.8c0 0-29.696-65.792-89.6-89.6s-134.4 89.6-134.4 89.6S535.04 596.992 467.2 444.8C399.36 292.608 153.6 624 153.6 624l0-358.4L870.4 265.6 870.4 668.8zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2C631.68 355.2 601.6 385.344 601.6 422.4 601.6 459.52 631.68 489.6 668.8 489.6z" p-id="2581" fill="#ffffff"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="18"><path fill="#fff" d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>
|
||||
|
Before Width: | Height: | Size: 883 B After Width: | Height: | Size: 506 B |
+10
-16
@@ -3,22 +3,16 @@ 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) => {
|
||||
type Config = {
|
||||
control?: boolean;
|
||||
setting?: boolean;
|
||||
title?: string;
|
||||
auto?: string;
|
||||
getName?(level: object): String;
|
||||
filter?(levels: object[]): object[];
|
||||
};
|
||||
|
||||
declare const artplayerPluginHlsControl: (option: { quality?: Config; audio?: Config }) => (art: Artplayer) => {
|
||||
name: 'artplayerPluginHlsControl';
|
||||
update: () => void;
|
||||
};
|
||||
Reference in new issue
Block a user