{"id":399,"date":"2025-01-18T20:04:02","date_gmt":"2025-01-18T12:04:02","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=399"},"modified":"2025-01-18T20:04:02","modified_gmt":"2025-01-18T12:04:02","slug":"fabric-%e8%87%aa%e5%ae%9a%e4%b9%89video%e5%85%83%e7%b4%a0","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=399","title":{"rendered":"fabric \u81ea\u5b9a\u4e49video\u5143\u7d20"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>  \/\/ \u5047\u8bbe\u4f60\u6709\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684 fabric.Video \u7c7b\n  fabric.Video = fabric.util.createClass(fabric.Object, {\n    type: 'video',\n\n    initialize: function (options) {\n      options = options || {};\n      this.callSuper('initialize', options);\n\n      this.videoEl = document.createElement('video');\n      this.videoEl.src = options.src;\n      this.videoEl.loop = options.loop || false;\n      this.videoEl.controls = options.controls || false;\n      this.videoEl.crossOrigin = 'anonymous'; \/\/ \u89e3\u51b3 CORS \u95ee\u9898\n      this.videoEl.onload = this.videoEl.play;\n      this.videoEl.onended = this.videoEl.play;\n\n      if (options.autoplay) {\n        this.videoEl.play();\n      }\n      this.on('removed', this.dispose.bind(this));\n    },\n\n    _render: function (ctx) {\n      this.update = () => {\n        if (this.videoEl) {\n          ctx.drawImage(this.videoEl, -this.width \/ 2, -this.height \/ 2, this.width, this.height);\n          canvasEditor.fabricCanvas?.requestRenderAll();\n          requestAnimationFrame(this.update);\n        }\n      };\n      this.update();\n    },\n\n    dispose: function () {\n      \/\/ \u505c\u6b62\u7ed8\u5236\u89c6\u9891\u5e27\n      cancelAnimationFrame(this.update);\n\n      \/\/ \u91ca\u653e\u89c6\u9891\u5143\u7d20\u8d44\u6e90\n      if (this.videoEl) {\n        this.videoEl.pause();\n        this.videoEl.src = ''; \/\/ \u6e05\u7a7a src \u5c5e\u6027\uff0c\u91ca\u653e\u8d44\u6e90\n        (this.videoEl as HTMLVideoElement).load(); \/\/ \u786e\u4fdd\u6d4f\u89c8\u5668\u91ca\u653e\u8d44\u6e90\n        this.videoEl = null; \/\/ \u89e3\u9664\u5f15\u7528\n      }\n      \/\/ \u8c03\u7528\u7236\u7c7b\u7684 dispose \u65b9\u6cd5\uff08\u5982\u679c\u5b58\u5728\uff09\n\n      if (this.callSuper) {\n        this.callSuper('dispose');\n      }\n    },\n\n    toObject: function () {\n      return fabric.util.object.extend(this.callSuper('toObject'), {\n        src: this.videoEl.src,\n        loop: this.videoEl.loop,\n        controls: this.videoEl.controls,\n        autoplay: this.videoEl.autoplay,\n      });\n    },\n  });\n\n  \/\/ \u6ce8\u518c\u81ea\u5b9a\u4e49\u5bf9\u8c61\u7c7b\u578b\n  fabric.Video.fromObject = function (object, callback) {\n    const video = new fabric.Video(object);\n    callback(video);\n  };<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[37,65],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-canvas","tag-fabric","tag-video"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=399"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/399\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}