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

chore: Update artplayer-proxy-canvas to support canvas proxy

Browse Source
This commit is contained in:
Harvey Zack committed 2024-09-08 18:20:11 +08:00
1 parent 0f60ea53ae
commit 813528f916
4 files changed
+59 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/canvas.js
+5 -6
View File
@@ -3,7 +3,7 @@
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/frag_bunny.mp4',
url: '/assets/sample/video.mp4',
volume: 0.5,
autoplay: false,
autoSize: false,
@@ -18,11 +18,10 @@ var art = new Artplayer({
miniProgressBar: true,
autoPlayback: true,
thumbnails: {
url: '/assets/sample/bbb-sprite.jpg',
number: 121,
column: 11,
width: 128,
height: 72,
url: '/assets/sample/thumbnails.png',
number: 60,
column: 10,
scale: 0.85,
},
proxy: artplayerProxyCanvas(),
});
docs/uncompiled/artplayer-proxy-canvas/index.js
+21 -2
View File
@@ -160,8 +160,24 @@ function artplayerProxyCanvas(callback) {
...methods,
...prototypes
];
const originalCanvasProperties = {};
[
"width",
"height"
].forEach((prop)=>{
originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
});
keys.forEach((key)=>{
def(canvas, key, {
if (key === "width" || key === "height") def(canvas, key, {
get () {
return originalCanvasProperties[key].get.call(this);
},
set (value) {
originalCanvasProperties[key].set.call(this, value);
video[key] = value;
}
});
else def(canvas, key, {
get () {
const value = video[key];
return typeof value === "function" ? value.bind(video) : value;
@@ -215,7 +231,6 @@ function artplayerProxyCanvas(callback) {
resize();
});
art.on("video:play", ()=>{
console.log("video:play");
cancelAnimationFrame(animationFrame);
animationFrame = requestAnimationFrame(drawFrame);
});
@@ -223,6 +238,10 @@ function artplayerProxyCanvas(callback) {
cancelAnimationFrame(animationFrame);
});
art.on("resize", resize);
const destroy = ()=>{
cancelAnimationFrame(animationFrame);
};
art.on("destroy", destroy);
if (typeof callback === "function") callback.call(art, video, option.url, art);
else video.src = option.url;
return canvas;
docs/uncompiled/artplayer-proxy-canvas/index.js.map
+1 -1
View File
@@ -1 +1 @@
{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas(callback) {\n return (art) => {\n const { option, constructor } = art;\n const { createElement, def } = constructor.utils;\n\n const canvas = createElement('canvas');\n const ctx = canvas.getContext('2d');\n const video = createElement('video');\n\n let animationFrame = null;\n const { propertys, methods, prototypes, events } = constructor.config;\n const keys = [...propertys, ...methods, ...prototypes];\n\n keys.forEach((key) => {\n def(canvas, key, {\n get() {\n const value = video[key];\n return typeof value === 'function' ? value.bind(video) : value;\n },\n set(value) {\n video[key] = value;\n },\n });\n });\n\n setTimeout(() => {\n for (let index = 0; index < events.length; index++) {\n const event = events[index];\n art.proxy(video, event, (event) => {\n art.emit(`video:${event.type}`, event);\n });\n }\n });\n\n let lastDrawTime = 0;\n const drawFrame = (timestamp) => {\n if (!video.paused && !video.ended) {\n if (timestamp - lastDrawTime > 1000 / 30) {\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n lastDrawTime = timestamp;\n }\n animationFrame = requestAnimationFrame(drawFrame);\n }\n };\n\n const resize = () => {\n const player = art.template?.$player;\n if (!player || option.autoSize) return;\n\n const aspectRatio = canvas.videoWidth / canvas.videoHeight;\n const containerWidth = player.clientWidth;\n const containerHeight = player.clientHeight;\n const containerRatio = containerWidth / containerHeight;\n\n let paddingLeft = 0;\n let paddingTop = 0;\n\n if (containerRatio > aspectRatio) {\n const canvasWidth = containerHeight * aspectRatio;\n paddingLeft = (containerWidth - canvasWiLine truncated
{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas(callback) {\n return (art) => {\n const { option, constructor } = art;\n const { createElement, def } = constructor.utils;\n\n const canvas = createElement('canvas');\n const ctx = canvas.getContext('2d');\n const video = createElement('video');\n\n let animationFrame = null;\n const { propertys, methods, prototypes, events } = constructor.config;\n const keys = [...propertys, ...methods, ...prototypes];\n\n const originalCanvasProperties = {};\n ['width', 'height'].forEach((prop) => {\n originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);\n });\n\n keys.forEach((key) => {\n if (key === 'width' || key === 'height') {\n def(canvas, key, {\n get() {\n return originalCanvasProperties[key].get.call(this);\n },\n set(value) {\n originalCanvasProperties[key].set.call(this, value);\n video[key] = value;\n },\n });\n } else {\n def(canvas, key, {\n get() {\n const value = video[key];\n return typeof value === 'function' ? value.bind(video) : value;\n },\n set(value) {\n video[key] = value;\n },\n });\n }\n });\n\n setTimeout(() => {\n for (let index = 0; index < events.length; index++) {\n const event = events[index];\n art.proxy(video, event, (event) => {\n art.emit(`video:${event.type}`, eveLine truncated
packages/artplayer-proxy-canvas/src/index.js
+32 -10
View File
@@ -11,16 +11,33 @@ export default function artplayerProxyCanvas(callback) {
const { propertys, methods, prototypes, events } = constructor.config;
const keys = [...propertys, ...methods, ...prototypes];
const originalCanvasProperties = {};
['width', 'height'].forEach((prop) => {
originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);
});
keys.forEach((key) => {
def(canvas, key, {
get() {
const value = video[key];
return typeof value === 'function' ? value.bind(video) : value;
},
set(value) {
video[key] = value;
},
});
if (key === 'width' || key === 'height') {
def(canvas, key, {
get() {
return originalCanvasProperties[key].get.call(this);
},
set(value) {
originalCanvasProperties[key].set.call(this, value);
video[key] = value;
},
});
} else {
def(canvas, key, {
get() {
const value = video[key];
return typeof value === 'function' ? value.bind(video) : value;
},
set(value) {
video[key] = value;
},
});
}
});
setTimeout(() => {
@@ -75,7 +92,6 @@ export default function artplayerProxyCanvas(callback) {
});
art.on('video:play', () => {
console.log('video:play');
cancelAnimationFrame(animationFrame);
animationFrame = requestAnimationFrame(drawFrame);
});
@@ -86,6 +102,12 @@ export default function artplayerProxyCanvas(callback) {
art.on('resize', resize);
const destroy = () => {
cancelAnimationFrame(animationFrame);
};
art.on('destroy', destroy);
if (typeof callback === 'function') {
callback.call(art, video, option.url, art);
} else {