mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 05:26:15 -08:00
feat: artplayerProxyCanvas
This commit is contained in:
Harvey Zack committed
1 parent
22dce779d1
commit
710f9477f8
4 files changed
+173
-182
No files matched your search
@@ -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(),
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
@@ -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 Line 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() {\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 }Line truncated
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user