refactor: Update build timestamp in Artplayer

packages/artplayer-plugin-canvas/README.md

@@ -0,0 +1,11 @@
+# artplayer-plugin-canvas
+
+canvas plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-canvas/index.js&example=canvas)
+
+## License
+
+MIT © Harvey Zack

packages/artplayer-plugin-canvas/package.json

@@ -0,0 +1,24 @@
+{
+    "license": "MIT",
+    "version": "1.0.0",
+    "name": "artplayer-plugin-canvas",
+    "types": "types/artplayer-plugin-canvas.d.ts",
+    "description": "Canvas plugin for ArtPlayer",
+    "main": "dist/artplayer-plugin-canvas.js",
+    "legacy": "dist/artplayer-plugin-canvas.legacy.js",
+    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+    "browserslist": "last 1 Chrome version",
+    "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"
+    ]
+}

packages/artplayer-plugin-canvas/src/index.js

@@ -0,0 +1,98 @@
+export default class ArtplayerPluginCanvas extends HTMLCanvasElement {
+    constructor(art) {
+        super();
+
+        this.art = art;
+        console.log(art);
+
+        this._muted = false;
+        this._volume = 1;
+        this._src = '';
+        this._currentTime = 0;
+        this._playbackRate = 1;
+
+        this.loop = false;
+        this.ended = false;
+        this.paused = true;
+        this.readyState = 0;
+        this.videoWidth = 0;
+        this.videoHeight = 0;
+        this.autoplay = false;
+        this.duration = NaN;
+
+        this.buffered = {
+            length: 0,
+            start: () => 0,
+            end: () => 0,
+        };
+
+        this.textTracks = [{ activeCues: [] }];
+    }
+
+    get muted() {
+        console.log('get muted');
+        return this._muted;
+    }
+
+    set muted(muted) {
+        console.log('set muted');
+        this._muted = muted;
+    }
+
+    get volume() {
+        console.log('get volume');
+        return this._volume;
+    }
+
+    set volume(percentage) {
+        console.log('set volume');
+        this._volume = percentage;
+    }
+
+    get src() {
+        console.log('get src');
+        return this._src;
+    }
+
+    set src(newSrc) {
+        console.log('set src');
+        this._src = newSrc;
+    }
+
+    get currentTime() {
+        console.log('get currentTime');
+        return this._currentTime;
+    }
+
+    set currentTime(time) {
+        console.log('set currentTime');
+        this._currentTime = time;
+    }
+
+    get playbackRate() {
+        console.log('get playbackRate');
+        return this._playbackRate;
+    }
+
+    set playbackRate(rate) {
+        console.log('set playbackRate');
+        this._playbackRate = rate;
+    }
+
+    async play() {
+        console.log('play');
+        return true;
+    }
+
+    pause() {
+        console.log('pause');
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window['ArtplayerPluginCanvas'] = ArtplayerPluginCanvas;
+
+    if (!customElements.get('art-plugin-canvas')) {
+        customElements.define('art-plugin-canvas', ArtplayerPluginCanvas, { extends: 'canvas' });
+    }
+}

packages/artplayer-plugin-canvas/types/artplayer-plugin-canvas.d.ts

@@ -0,0 +1,14 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginCanvas;
+export as namespace artplayerPluginCanvas;
+
+type Option = {
+    //
+};
+
+type Result = {
+    name: 'artplayerPluginCanvas';
+};
+
+declare const artplayerPluginCanvas: (option: Option) => (art: Artplayer) => Result;

packages/artplayer/src/template.js

@@ -1,4 +1,4 @@
-import { supportsFlex, errorHandle, query, addClass, isMobile } from './utils';
+import { supportsFlex, errorHandle, query, addClass, isMobile, replaceElement } from './utils';
 
 export default class Template {
     constructor(art) {
@@ -124,6 +124,13 @@ export default class Template {
         this.$infoClose = this.query('.art-info-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
+        if (option.Canvas) {
+            const $canvas = new option.Canvas(this.art);
+            replaceElement($canvas, this.$video);
+            addClass($canvas, 'art-video');
+            this.$video = $canvas;
+        }
+
         if (option.backdrop) {
             addClass(this.$player, 'art-backdrop');
         }