mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 01:12:21 -08:00
add artplayer-plugin-vtt-thumbnail
This commit is contained in:
Harvey Zack committed
1 parent
20a4252955
commit
4028a46195
22 files changed
+660
-140
No files matched your search
@@ -0,0 +1,10 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
test
|
||||
coverage
|
||||
.nyc_output
|
||||
.parcel-cache
|
||||
.cache
|
||||
docs
|
||||
@@ -0,0 +1 @@
|
||||
package-lock=false
|
||||
@@ -0,0 +1,11 @@
|
||||
# artplayer-plugin-vtt-thumbnail
|
||||
|
||||
vtt thumbnail plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail)
|
||||
|
||||
## License
|
||||
|
||||
MIT © Harvey Zack
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* artplayer-plugin-vtt-thumbnail.js v1.0.0
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,n,r,o){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof i[r]&&i[r],u=l.cache||{},s="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 i[r]&&i[r];if(!n&&o)return o(t,!0);if(l)return l(t,!0);if(s&&"string"==typeof t)return s(t);var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}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=l,f.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(f,"root",{get:function(){return i[r]}}),i[r]=f;for(var a=0;a<t.length;a++)f(t[a]);if(n){var c=f(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({YTqB2:[function(e,t,n){var r=e("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(n);var o=e("./getVttArray"),i=r.interopDefault(o);function l(e){return async t=>{const{constructor:{utils:{setStyle:n,clamp:r}},template:{$progress:o},events:{proxy:l}}=t,u=await(0,i.default)(e.vtt);return t.controls.add({name:"thumbnails",position:"top",index:20,style:e.style||{},mounted(e){l(o,"mousemove",(async i=>{n(e,"display","block");const{second:l,width:s}=function(e,t){const{$progress:n}=e.template,{left:o}=n.getBoundingClientRect(),i=r(t.pageX-o,0,n.clientWidth);return{width:i,second:i/n.clientWidth*e.duration}}(t,i),f=u.find((e=>l>=e.start&&l<=e.end));if(!f)return n(e,"display","none");n(e,"backgroundImage",`url(${f.url})`),n(e,"height",`${f.h}px`),n(e,"width",`${f.w}px`),n(e,"backgroundPosition",`-${f.x}px -${f.y}px`),s<=f.w/2?n(e,"left",0):s>o.clientWidth-f.w/2?n(e,"left",o.clientWidth-f.w+"px"):n(e,"left",s-f.w/2+"px")})),l(o,"mouseleave",(()=>{n(e,"display","none")})),t.on("hover",(t=>{n(e,"display",t?"block":"none")}))}}),{name:"artplayerPluginVttThumbnail"}}}n.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-14 14:41:14","undefined"!=typeof window&&(window.artplayerPluginVttThumbnail=l)},{"./getVttArray":"4IFMi","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"4IFMi":[function(e,t,n){function r(e){var t,n,r,o=e.split("."),i=o[0].split(":")||[],l=(t=o[1]||"0",n=3,r="0",t.length>n?String(t):((n-=t.length)>r.length&&(r+=r.repeat(n/r.length)),String(t)+r.slice(0,n))),u=Number(l)/1e3;return 3600*Number(i[i.length-3]||0)+60*Number(i[i.length-2]||0)+Number(i[i.length-1]||0)+u}e("@parcel/transformer-js/src/esmodule-helpers.js").defineInteropFlag(n),n.default=async function(e=""){const t=(await(await fetch(e)).text()).split(/[\n\r]/gm).filter((e=>e.trim())),n=[];for(let o=1;o<t.length;o+=2){const i=t[o],l=t[o+1];if(!l.trim())continue;const u=/((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)(?: ?--> ?)((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)/,s=i.match(u),f=/(.*)#(\w{4})=(.*)/i,a=l.match(f),c=Math.floor(r(s[1])),d=Math.floor(r(s[2])),p=e.split("/");p.pop(),p.push(a[1]);const h={start:c,end:d,url:p.join("/")},m=a[2].split(""),g=a[3].split(",");for(let e=0;e<m.length;e++)h[m[e]]=g[e];n.push(h)}return n}},{"@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"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||t.hasOwnProperty(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})}},{}]},["YTqB2"],"YTqB2","parcelRequire4dc0");
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* artplayer-plugin-vtt-thumbnail.js v1.0.0
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2023 Harvey Zack
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,n,r,o){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},l="function"==typeof i[r]&&i[r],u=l.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function s(t,n){if(!u[t]){if(!e[t]){var o="function"==typeof i[r]&&i[r];if(!n&&o)return o(t,!0);if(l)return l(t,!0);if(f&&"string"==typeof t)return f(t);var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}d.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},d.cache={};var c=u[t]=new s.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?{}:s(t)}}s.isParcelRequire=!0,s.Module=function(e){this.id=e,this.bundle=s,this.exports={}},s.modules=e,s.cache=u,s.parent=l,s.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(s,"root",{get:function(){return i[r]}}),i[r]=s;for(var a=0;a<t.length;a++)s(t[a]);if(n){var c=s(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define((function(){return c}))}}({flifo:[function(e,t,n){var r=e("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(n);var o=e("./getVttArray"),i=r.interopDefault(o);function l(e){return async t=>{const{constructor:{utils:{setStyle:n,clamp:r}},template:{$progress:o},events:{proxy:l}}=t,u=await(0,i.default)(e.vtt);return t.controls.add({name:"thumbnails",position:"top",index:20,style:e.style||{},mounted(e){l(o,"mousemove",(async i=>{n(e,"display","block");const{second:l,width:f}=function(e,t){const{$progress:n}=e.template,{left:o}=n.getBoundingClientRect(),i=r(t.pageX-o,0,n.clientWidth);return{width:i,second:i/n.clientWidth*e.duration}}(t,i),s=u.find((e=>l>=e.start&&l<=e.end));if(!s)return n(e,"display","none");n(e,"backgroundImage",`url(${s.url})`),n(e,"height",`${s.h}px`),n(e,"width",`${s.w}px`),n(e,"backgroundPosition",`-${s.x}px -${s.y}px`),f<=s.w/2?n(e,"left",0):f>o.clientWidth-s.w/2?n(e,"left",o.clientWidth-s.w+"px"):n(e,"left",f-s.w/2+"px")})),l(o,"mouseleave",(()=>{n(e,"display","none")})),t.on("hover",(t=>{n(e,"display",t?"block":"none")}))}}),{name:"artplayerPluginVttThumbnail"}}}n.default=l,l.env="production",l.version="1.0.0",l.build="2023-01-14 14:41:16","undefined"!=typeof window&&(window.artplayerPluginVttThumbnail=l)},{"./getVttArray":"5fcbX","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"5fcbX":[function(e,t,n){function r(e){var t,n,r,o=e.split("."),i=o[0].split(":")||[],l=(t=o[1]||"0",n=3,r="0",t.length>n?String(t):((n-=t.length)>r.length&&(r+=r.repeat(n/r.length)),String(t)+r.slice(0,n))),u=Number(l)/1e3;return 3600*Number(i[i.length-3]||0)+60*Number(i[i.length-2]||0)+Number(i[i.length-1]||0)+u}e("@parcel/transformer-js/src/esmodule-helpers.js").defineInteropFlag(n),n.default=async function(e=""){const t=(await(await fetch(e)).text()).split(/[\n\r]/gm).filter((e=>e.trim())),n=[];for(let o=1;o<t.length;o+=2){const i=t[o],l=t[o+1];if(!l.trim())continue;const u=/((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)(?: ?--> ?)((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)/,f=i.match(u),s=/(.*)#(\w{4})=(.*)/i,a=l.match(s),c=Math.floor(r(f[1])),d=Math.floor(r(f[2])),p=e.split("/");p.pop(),p.push(a[1]);const h={start:c,end:d,url:p.join("/")},m=a[2].split(""),g=a[3].split(",");for(let e=0;e<m.length;e++)h[m[e]]=g[e];n.push(h)}return n}},{"@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"47PTV":[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||t.hasOwnProperty(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})}},{}]},["flifo"],"flifo","parcelRequire4dc0");
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"license": "MIT",
|
||||
"version": "1.0.0",
|
||||
"name": "artplayer-plugin-vtt-thumbnail",
|
||||
"types": "types/artplayer-plugin-vtt-thumbnail.d.ts",
|
||||
"description": "vtt thumbnail plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-vtt-thumbnail.js",
|
||||
"legacy": "dist/artplayer-plugin-vtt-thumbnail.legacy.js",
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||
"homepage": "https://artplayer.org",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"html5",
|
||||
"video",
|
||||
"player"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
function padEnd(str, targetLength, padString) {
|
||||
if (str.length > targetLength) {
|
||||
return String(str);
|
||||
} else {
|
||||
targetLength = targetLength - str.length;
|
||||
if (targetLength > padString.length) {
|
||||
padString += padString.repeat(targetLength / padString.length);
|
||||
}
|
||||
return String(str) + padString.slice(0, targetLength);
|
||||
}
|
||||
}
|
||||
|
||||
function t2d(time) {
|
||||
var arr = time.split('.');
|
||||
var left = arr[0].split(':') || [];
|
||||
var right = padEnd(arr[1] || '0', 3, '0');
|
||||
var ms = Number(right) / 1000;
|
||||
|
||||
var h = Number(left[left.length - 3] || 0) * 3600;
|
||||
var m = Number(left[left.length - 2] || 0) * 60;
|
||||
var s = Number(left[left.length - 1] || 0);
|
||||
return h + m + s + ms;
|
||||
}
|
||||
|
||||
export default async function getVttArray(vttUrl = '') {
|
||||
const vttString = await (await fetch(vttUrl)).text();
|
||||
const lines = vttString.split(/[\n\r]/gm).filter((item) => item.trim());
|
||||
const vttArray = [];
|
||||
|
||||
for (let i = 1; i < lines.length; i += 2) {
|
||||
const time = lines[i];
|
||||
const text = lines[i + 1];
|
||||
|
||||
if (!text.trim()) continue;
|
||||
|
||||
const timeReg =
|
||||
/((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)(?: ?--> ?)((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)/;
|
||||
const timeMatch = time.match(timeReg);
|
||||
|
||||
const textReg = /(.*)#(\w{4})=(.*)/i;
|
||||
const textMatch = text.match(textReg);
|
||||
|
||||
const start = Math.floor(t2d(timeMatch[1]));
|
||||
const end = Math.floor(t2d(timeMatch[2]));
|
||||
|
||||
const urlArr = vttUrl.split('/');
|
||||
urlArr.pop();
|
||||
urlArr.push(textMatch[1]);
|
||||
const url = urlArr.join('/');
|
||||
|
||||
const result = { start, end, url };
|
||||
|
||||
const keys = textMatch[2].split('');
|
||||
const values = textMatch[3].split(',');
|
||||
|
||||
for (let j = 0; j < keys.length; j++) {
|
||||
result[keys[j]] = values[j];
|
||||
}
|
||||
|
||||
vttArray.push(result);
|
||||
}
|
||||
|
||||
return vttArray;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import getVttArray from './getVttArray';
|
||||
|
||||
export default function artplayerPluginVttThumbnail(option) {
|
||||
return async (art) => {
|
||||
const {
|
||||
constructor: {
|
||||
utils: { setStyle, clamp },
|
||||
},
|
||||
template: { $progress },
|
||||
events: { proxy },
|
||||
} = art;
|
||||
|
||||
const vttArray = await getVttArray(option.vtt);
|
||||
|
||||
function getPosFromEvent(art, event) {
|
||||
const { $progress } = art.template;
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
const width = clamp(event.pageX - left, 0, $progress.clientWidth);
|
||||
const second = (width / $progress.clientWidth) * art.duration;
|
||||
return { width, second };
|
||||
}
|
||||
|
||||
art.controls.add({
|
||||
name: 'thumbnails',
|
||||
position: 'top',
|
||||
index: 20,
|
||||
style: option.style || {},
|
||||
mounted($control) {
|
||||
proxy($progress, 'mousemove', async (event) => {
|
||||
setStyle($control, 'display', 'block');
|
||||
const { second, width } = getPosFromEvent(art, event);
|
||||
const find = vttArray.find((item) => second >= item.start && second <= item.end);
|
||||
if (!find) return setStyle($control, 'display', 'none');
|
||||
|
||||
setStyle($control, 'backgroundImage', `url(${find.url})`);
|
||||
setStyle($control, 'height', `${find.h}px`);
|
||||
setStyle($control, 'width', `${find.w}px`);
|
||||
setStyle($control, 'backgroundPosition', `-${find.x}px -${find.y}px`);
|
||||
|
||||
if (width <= find.w / 2) {
|
||||
setStyle($control, 'left', 0);
|
||||
} else if (width > $progress.clientWidth - find.w / 2) {
|
||||
setStyle($control, 'left', `${$progress.clientWidth - find.w}px`);
|
||||
} else {
|
||||
setStyle($control, 'left', `${width - find.w / 2}px`);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($progress, 'mouseleave', () => {
|
||||
setStyle($control, 'display', 'none');
|
||||
});
|
||||
|
||||
art.on('hover', (state) => {
|
||||
setStyle($control, 'display', state ? 'block' : 'none');
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'artplayerPluginVttThumbnail',
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
artplayerPluginVttThumbnail.env = process.env.NODE_ENV;
|
||||
artplayerPluginVttThumbnail.version = process.env.APP_VER;
|
||||
artplayerPluginVttThumbnail.build = process.env.BUILD_DATE;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window['artplayerPluginVttThumbnail'] = artplayerPluginVttThumbnail;
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import type Artplayer from 'artplayer';
|
||||
|
||||
export = artplayerPluginVttThumbnail;
|
||||
export as namespace artplayerPluginVttThumbnail;
|
||||
|
||||
declare const artplayerPluginVttThumbnail: (option: { vtt?: string; style?: Partial<CSSStyleDeclaration> }) => (
|
||||
art: Artplayer,
|
||||
) => {
|
||||
name: 'artplayerPluginVttThumbnail';
|
||||
};
|
||||
Reference in new issue
Block a user