diff --git a/docs/assets/example/canvas.js b/docs/assets/example/canvas.js index ee332d401..79528738d 100644 --- a/docs/assets/example/canvas.js +++ b/docs/assets/example/canvas.js @@ -24,23 +24,5 @@ var art = new Artplayer({ column: 10, scale: 0.85, }, - controls: [ - { - position: 'right', - html: 'play', - index: 1, - click: function () { - window.video.play(); - }, - }, - { - position: 'right', - html: 'pause', - index: 2, - click: function () { - window.video.pause(); - }, - }, - ], proxy: artplayerProxyCanvas(), }); \ No newline at end of file diff --git a/docs/uncompiled/artplayer-proxy-canvas/index.js b/docs/uncompiled/artplayer-proxy-canvas/index.js index 56e524a27..7421308cd 100644 --- a/docs/uncompiled/artplayer-proxy-canvas/index.js +++ b/docs/uncompiled/artplayer-proxy-canvas/index.js @@ -146,71 +146,80 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); parcelHelpers.export(exports, "default", ()=>artplayerProxyCanvas); -function artplayerProxyCanvas(callback) { +function artplayerProxyCanvas() { return (art)=>{ const { option, constructor } = art; - const { createElement, def, append } = constructor.utils; + const { createElement, def } = constructor.utils; + let animationId = null; const canvas = createElement("canvas"); const ctx = canvas.getContext("2d"); const video = createElement("video"); - video.playsInline = true; - window.video = video; - const track = createElement("track"); - track.default = true; - track.kind = "metadata"; - append(video, track); - let animationFrame = null; + const canvasProperties = {}; + const canvasKeys = [ + "width", + "height" + ]; const { propertys, methods, prototypes, events } = constructor.config; - const keys = [ + const videoKeys = [ ...propertys, ...methods, ...prototypes ]; - const originalCanvasProperties = {}; - [ - "width", - "height" - ].forEach((prop)=>{ - originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop); - }); - keys.forEach((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; - } + initCanvasProperties(); + proxyVideoToCanvas(); + setupEventListeners(); + setupArtPlayerEvents(); + return canvas; + function initCanvasProperties() { + canvasKeys.forEach((prop)=>{ + canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop); }); - else def(canvas, key, { - get () { - const value = video[key]; - return typeof value === "function" ? value.bind(video) : value; - }, - set (value) { - video[key] = value; - } - }); - }); - setTimeout(()=>{ - for(let index = 0; index < events.length; index++){ - const event = events[index]; - art.proxy(video, event, (event)=>{ - art.emit(`video:${event.type}`, event); + } + function proxyVideoToCanvas() { + videoKeys.forEach((key)=>{ + if (canvasKeys.includes(key)) def(canvas, key, { + get () { + return canvasProperties[key].get.call(this); + }, + set (value) { + canvasProperties[key].set.call(this, value); + } }); + else def(canvas, key, { + get () { + const value = video[key]; + return typeof value === "function" ? value.bind(video) : value; + }, + set (value) { + video[key] = value; + } + }); + }); + } + function setupEventListeners() { + setTimeout(()=>{ + events.forEach((event)=>{ + art.proxy(video, event, (event)=>{ + art.emit(`video:${event.type}`, event); + }); + }); + }); + } + async function draw() { + try { + const bitmap = await createImageBitmap(video); + ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); + bitmap.close(); + art.emit("artplayerProxyCanvas:draw", ctx); + } catch (error) { + art.emit("artplayerProxyCanvas:error", error); } - }); - const draw = ()=>{ - console.log(video.currentTime); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - art.emit("artplayerProxyCanvas:draw", ctx); - }; - const animation = ()=>{ - draw(); - animationFrame = requestAnimationFrame(animation); - }; - const resize = ()=>{ + } + async function animation() { + await draw(); + animationId = requestAnimationFrame(animation); + } + function resize() { const player = art.template?.$player; if (!player || option.autoSize) return; const aspectRatio = video.videoWidth / video.videoHeight; @@ -232,29 +241,27 @@ function artplayerProxyCanvas(callback) { Object.assign(canvas.style, { padding: `${paddingTop}px ${paddingLeft}px` }); - }; - art.on("video:loadedmetadata", async ()=>{ - canvas.width = video.videoWidth; - canvas.height = video.videoHeight; - }); - art.on("video:play", ()=>{ - console.log("video:play"); - cancelAnimationFrame(animationFrame); - animationFrame = requestAnimationFrame(animation); - }); - art.on("video:pause", ()=>{ - cancelAnimationFrame(animationFrame); - }); - art.on("resize", ()=>{ - resize(); - draw(); - }); - art.on("destroy", ()=>{ - cancelAnimationFrame(animationFrame); - }); - if (typeof callback === "function") callback.call(art, video, option.url, art); - else video.src = option.url; - return canvas; + } + function setupArtPlayerEvents() { + art.on("video:loadedmetadata", async ()=>{ + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + }); + art.on("video:play", ()=>{ + cancelAnimationFrame(animationId); + animationId = requestAnimationFrame(animation); + }); + art.on("video:pause", ()=>{ + cancelAnimationFrame(animationId); + }); + art.on("resize", ()=>{ + resize(); + draw(); + }); + art.on("destroy", ()=>{ + cancelAnimationFrame(animationId); + }); + } }; } if (typeof window !== "undefined") window["artplayerProxyCanvas"] = artplayerProxyCanvas; diff --git a/docs/uncompiled/artplayer-proxy-canvas/index.js.map b/docs/uncompiled/artplayer-proxy-canvas/index.js.map index d894573bf..d39e620ec 100644 --- a/docs/uncompiled/artplayer-proxy-canvas/index.js.map +++ b/docs/uncompiled/artplayer-proxy-canvas/index.js.map @@ -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, append } = constructor.utils;\n\n const canvas = createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n const video = createElement('video');\n video.playsInline = true;\n window.video = video;\n\n const track = createElement('track');\n track.default = true;\n track.kind = 'metadata';\n append(video, track);\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}`, event);\n });\n }\n });\n\n const draw = () => {\n console.log(video.currentTime);\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n art.emit('artplayerProxyCanvas:draw', ctx);\n };\n\n const animation = () => {\n draw();\n animationFrame = requestAnimationFrame(animation);\n };\n\n const resize = () => {\n const player = art.template?.$player;\n if (!player || option.autoSize) return;\n\n const aspectRatio = video.videoWidth / video.videoHeight;\n const containerWidth = player.clientWidth;\n const containerHeight = player.clientHeight;\n const containerRatio = containerWidth / containerHeight;\n\n let canvasWidth, canvasHeight;\n if (containerRatio > aspectRatio) {\n canvasHeight = containerHeight;\n canvasWidth = canvasHeight * aspectRatio;\n } else {\n canvasWidth = containerWidth;\n canvasHeight = canvasWidth / aspectRatio;\n }\n\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n\n const paddingLeft = (containerWidth - canvasWidth) / 2;\n const paddingTop = (containerHeight - canvasHeight) / 2;\n\n Object.assign(canvas.style, {\n padding: `${paddingTop}px ${paddingLeft}px`,\n });\n };\n\n art.on('video:loadedmetadata', async () => {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n });\n\n art.on('video:play', () => {\n console.log('video:play');\n cancelAnimationFrame(animationFrame);\n animationFrame = requestAnimationFrame(animation);\n });\n\n art.on('video:pause', () => {\n cancelAnimationFrame(animationFrame);\n });\n\n art.on('resize', () => {\n resize();\n draw();\n });\n\n art.on('destroy', () => {\n cancelAnimationFrame(animationFrame);\n });\n\n if (typeof callback === 'function') {\n callback.call(art, video, option.url, art);\n } else {\n video.src = option.url;\n }\n\n return canvas;\n };\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerProxyCanvas'] = artplayerProxyCanvas;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file +{"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() {\n return (art) => {\n const { option, constructor } = art;\n const { createElement, def } = constructor.utils;\n\n let animationId = null;\n const canvas = createElement('canvas');\n const ctx = canvas.getContext('2d');\n const video = createElement('video');\n\n const canvasProperties = {};\n const canvasKeys = ['width', 'height'];\n const { propertys, methods, prototypes, events } = constructor.config;\n const videoKeys = [...propertys, ...methods, ...prototypes];\n\n initCanvasProperties();\n proxyVideoToCanvas();\n setupEventListeners();\n setupArtPlayerEvents();\n\n return canvas;\n\n function initCanvasProperties() {\n canvasKeys.forEach((prop) => {\n canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop);\n });\n }\n\n function proxyVideoToCanvas() {\n videoKeys.forEach((key) => {\n if (canvasKeys.includes(key)) {\n def(canvas, key, {\n get() {\n return canvasProperties[key].get.call(this);\n },\n set(value) {\n canvasProperties[key].set.call(this, 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\n function setupEventListeners() {\n setTimeout(() => {\n events.forEach((event) => {\n art.proxy(video, event, (event) => {\n art.emit(`video:${event.type}`, event);\n });\n });\n });\n }\n\n async function draw() {\n try {\n const bitmap = await createImageBitmap(video);\n ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n bitmap.close();\n art.emit('artplayerProxyCanvas:draw', ctx);\n } catch (error) {\n art.emit('artplayerProxyCanvas:error', error);\n }\n }\n\n async function animation() {\n await draw();\n animationId = requestAnimationFrame(animation);\n }\n\n function resize() {\n const player = art.template?.$player;\n if (!player || option.autoSize) return;\n\n const aspectRatio = video.videoWidth / video.videoHeight;\n const containerWidth = player.clientWidth;\n const containerHeight = player.clientHeight;\n const containerRatio = containerWidth / containerHeight;\n\n let canvasWidth, canvasHeight;\n if (containerRatio > aspectRatio) {\n canvasHeight = containerHeight;\n canvasWidth = canvasHeight * aspectRatio;\n } else {\n canvasWidth = containerWidth;\n canvasHeight = canvasWidth / aspectRatio;\n }\n\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n\n const paddingLeft = (containerWidth - canvasWidth) / 2;\n const paddingTop = (containerHeight - canvasHeight) / 2;\n\n Object.assign(canvas.style, {\n padding: `${paddingTop}px ${paddingLeft}px`,\n });\n }\n\n function setupArtPlayerEvents() {\n art.on('video:loadedmetadata', async () => {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n });\n\n art.on('video:play', () => {\n cancelAnimationFrame(animationId);\n animationId = requestAnimationFrame(animation);\n });\n\n art.on('video:pause', () => {\n cancelAnimationFrame(animationId);\n });\n\n art.on('resize', () => {\n resize();\n draw();\n });\n\n art.on('destroy', () => {\n cancelAnimationFrame(animationId);\n });\n }\n };\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerProxyCanvas'] = artplayerProxyCanvas;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file diff --git a/packages/artplayer-proxy-canvas/src/index.js b/packages/artplayer-proxy-canvas/src/index.js index 5829e707f..2f5340e8d 100644 --- a/packages/artplayer-proxy-canvas/src/index.js +++ b/packages/artplayer-proxy-canvas/src/index.js @@ -1,74 +1,83 @@ -export default function artplayerProxyCanvas(callback) { +export default function artplayerProxyCanvas() { return (art) => { const { option, constructor } = art; - const { createElement, def, append } = constructor.utils; + const { createElement, def } = constructor.utils; + let animationId = null; const canvas = createElement('canvas'); const ctx = canvas.getContext('2d'); - const video = createElement('video'); - video.playsInline = true; - window.video = video; - const track = createElement('track'); - track.default = true; - track.kind = 'metadata'; - append(video, track); - - let animationFrame = null; + const canvasProperties = {}; + const canvasKeys = ['width', 'height']; const { propertys, methods, prototypes, events } = constructor.config; - const keys = [...propertys, ...methods, ...prototypes]; + const videoKeys = [...propertys, ...methods, ...prototypes]; - const originalCanvasProperties = {}; - ['width', 'height'].forEach((prop) => { - originalCanvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop); - }); + initCanvasProperties(); + proxyVideoToCanvas(); + setupEventListeners(); + setupArtPlayerEvents(); - keys.forEach((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; - }, - set(value) { - video[key] = value; - }, + return canvas; + + function initCanvasProperties() { + canvasKeys.forEach((prop) => { + canvasProperties[prop] = Object.getOwnPropertyDescriptor(HTMLCanvasElement.prototype, prop); + }); + } + + function proxyVideoToCanvas() { + videoKeys.forEach((key) => { + if (canvasKeys.includes(key)) { + def(canvas, key, { + get() { + return canvasProperties[key].get.call(this); + }, + set(value) { + canvasProperties[key].set.call(this, value); + }, + }); + } else { + def(canvas, key, { + get() { + const value = video[key]; + return typeof value === 'function' ? value.bind(video) : value; + }, + set(value) { + video[key] = value; + }, + }); + } + }); + } + + function setupEventListeners() { + setTimeout(() => { + events.forEach((event) => { + art.proxy(video, event, (event) => { + art.emit(`video:${event.type}`, event); + }); }); + }); + } + + async function draw() { + try { + const bitmap = await createImageBitmap(video); + ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); + bitmap.close(); + art.emit('artplayerProxyCanvas:draw', ctx); + } catch (error) { + art.emit('artplayerProxyCanvas:error', error); } - }); + } - setTimeout(() => { - for (let index = 0; index < events.length; index++) { - const event = events[index]; - art.proxy(video, event, (event) => { - art.emit(`video:${event.type}`, event); - }); - } - }); + async function animation() { + await draw(); + animationId = requestAnimationFrame(animation); + } - const draw = () => { - console.log(video.currentTime); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - art.emit('artplayerProxyCanvas:draw', ctx); - }; - - const animation = () => { - draw(); - animationFrame = requestAnimationFrame(animation); - }; - - const resize = () => { + function resize() { const player = art.template?.$player; if (!player || option.autoSize) return; @@ -95,39 +104,32 @@ export default function artplayerProxyCanvas(callback) { Object.assign(canvas.style, { padding: `${paddingTop}px ${paddingLeft}px`, }); - }; - - art.on('video:loadedmetadata', async () => { - canvas.width = video.videoWidth; - canvas.height = video.videoHeight; - }); - - art.on('video:play', () => { - console.log('video:play'); - cancelAnimationFrame(animationFrame); - animationFrame = requestAnimationFrame(animation); - }); - - art.on('video:pause', () => { - cancelAnimationFrame(animationFrame); - }); - - art.on('resize', () => { - resize(); - draw(); - }); - - art.on('destroy', () => { - cancelAnimationFrame(animationFrame); - }); - - if (typeof callback === 'function') { - callback.call(art, video, option.url, art); - } else { - video.src = option.url; } - return canvas; + function setupArtPlayerEvents() { + art.on('video:loadedmetadata', async () => { + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + }); + + art.on('video:play', () => { + cancelAnimationFrame(animationId); + animationId = requestAnimationFrame(animation); + }); + + art.on('video:pause', () => { + cancelAnimationFrame(animationId); + }); + + art.on('resize', () => { + resize(); + draw(); + }); + + art.on('destroy', () => { + cancelAnimationFrame(animationId); + }); + } }; }