refactor: Update video element in Artplayer to support custom canvas or video

docs/compiled/artplayer-proxy-webav.js

@@ -0,0 +1,8 @@
+
+/*!
+ * artplayer-proxy-webav.js v1.0.0
+ * Github: https://github.com/zhw2590582/ArtPlayer
+ * (c) 2017-2024 Harvey Zack
+ * Released under the MIT License.
+ */
+!function(t,e,r,s,n){var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},o="function"==typeof a[s]&&a[s],h=o.cache||{},l="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(e,r){if(!h[e]){if(!t[e]){var n="function"==typeof a[s]&&a[s];if(!r&&n)return n(e,!0);if(o)return o(e,!0);if(l&&"string"==typeof e)return l(e);var d=Error("Cannot find module '"+e+"'");throw d.code="MODULE_NOT_FOUND",d}p.resolve=function(r){var s=t[e][1][r];return null!=s?s:r},p.cache={};var f=h[e]=new u.Module(e);t[e][0].call(f.exports,p,f,f.exports,this)}return h[e].exports;function p(t){var e=p.resolve(t);return!1===e?{}:u(e)}}u.isParcelRequire=!0,u.Module=function(t){this.id=t,this.bundle=u,this.exports={}},u.modules=t,u.cache=h,u.parent=o,u.register=function(e,r){t[e]=[function(t,e){e.exports=r},{}]},Object.defineProperty(u,"root",{get:function(){return a[s]}}),a[s]=u;for(var d=0;d<e.length;d++)u(e[d]);if(r){var f=u(r);"object"==typeof exports&&"undefined"!=typeof module?module.exports=f:"function"==typeof define&&define.amd&&define(function(){return f})}}({jc2x7:[function(t,e,r){var s=t("@parcel/transformer-js/src/esmodule-helpers.js");s.defineInteropFlag(r),s.export(r,"default",()=>a);var n=t("@webav/av-cliper");function a(){return t=>{let e,r;let{option:s,constructor:a}=t,{createElement:o,def:h}=a.utils,l=o("canvas"),u=l.getContext("2d"),d=null,f=null,p=null,c=null,m=0,g={playing:!1,duration:0,videoWidth:0,videoHeight:0,currentTime:0,playbackRate:1,paused:!0,ended:!1,readyState:0,buffered:0,muted:s.muted,volume:s.volume,autoplay:s.autoplay};function y(){p&&(clearInterval(p),p=null),f&&(f.stop(),f=null)}function _(){if(r){let t=g.muted?0:g.volume;r.gain.setValueAtTime(t,e.currentTime)}}async function b(){e||(r=(e=new AudioContext).createGain()).connect(e.destination);let s=1e6*g.currentTime,n=0,a=!0,o=performance.now();async function h(){if(!g.playing)return;let h=performance.now(),l=h-o;o=h,null!==c?(s=1e6*c,c=null,a=!0):s+=1e3*l*g.playbackRate,g.currentTime=s/1e6;let{state:p,video:m,audio:_}=await d.tick(Math.round(s));if(t.emit("video:timeupdate",{type:"timeupdate"}),"done"===p){y(),g.ended=!0,g.playing=!1,g.paused=!0,t.emit("video:ended",{type:"ended"});return}if(m&&"success"===p&&(u.clearRect(0,0,g.videoWidth,g.videoHeight),u.drawImage(m,0,0,g.videoWidth,g.videoHeight),m.close()),a)a=!1;else if(_?.[0]?.length){let t=e.createBuffer(2,_[0].length,48e3);t.copyToChannel(_[0],0),t.copyToChannel(_[1],1),(f=e.createBufferSource()).buffer=t,f.connect(r),f.playbackRate.setValueAtTime(g.playbackRate,e.currentTime),n=Math.max(e.currentTime,n),f.start(n),n+=t.duration/g.playbackRate}}y(),_(),g.playing=!0,g.paused=!1,p=setInterval(h,1e3/60)}async function w(t){let{video:e}=await d.tick(1e6*t);e&&(u.clearRect(0,0,l.width,l.height),u.drawImage(e,0,0,l.width,l.height),e.close())}function v(){let e=t.template?.$player;if(!e||s.autoSize)return;let r=l.videoWidth/l.videoHeight,n=e.clientWidth,a=e.clientHeight,o=0,h=0;n/a>r?o=(n-a*r)/2:h=(a-n/r)/2,Object.assign(l.style,{padding:`${h}px ${o}px`})}async function S(){if(!await (0,n.Combinator).isSupported())throw t.notice.show="WebAV is not supported",Error("WebAV is not supported");y(),Object.assign(g,{playing:!1,duration:0,videoWidth:0,videoHeight:0,currentTime:0,playbackRate:1,paused:!0,ended:!1,readyState:0,buffered:0,muted:s.muted,volume:s.volume,autoplay:s.autoplay}),d&&(d.destroy(),t.emit("video:abort",{type:"abort"}),t.emit("video:emptied",{type:"emptied"}));try{await Promise.resolve(),t.emit("video:loadstart",{type:"loadstart"});let e=await fetch(s.url);if(!e.body)throw Error("No response body");d=new n.MP4Clip(e.body)}catch(e){throw t.emit("video:error",e),e}let e=await d.ready;Object.assign(g,{readyState:4,duration:Math.round(e.duration/1e6),videoWidth:e.width,videoHeight:e.height}),l.width=g.videoWidth,l.height=g.videoHeight,await w(.1),v(),t.emit("video:loadedmetadata",{type:"loadedmetadata"}),t.emit("video:durationchange",{type:"durationchange"}),t.emit("video:loadeddata",{type:"loadeddata"}),t.emit("video:canplay",{type:"canplay"}),t.emit("video:canplaythrough",{type:"canplaythrough"})}return h(l,"textTracks",{get:()=>[]}),h(l,"duration",{get:()=>g.duration}),h(l,"videoWidth",{get:()=>g.videoWidth}),h(l,"videoHeight",{get:()=>g.videoHeight}),h(l,"volume",{get:()=>g.volume,set:e=>{g.volume=Math.max(0,Math.min(1,e)),_(),t.emit("video:volumechange",{type:"volumechange"})}}),h(l,"currentTime",{get:()=>g.currentTime,set:e=>{let r=Math.max(0,Math.min(e,g.duration)),s=performance.now();s-m>16&&(m=s,c=r,g.currentTime=r,g.playing||w(r),t.emit("video:timeupdate",{type:"timeupdate"}))}}),h(l,"autoplay",{get:()=>g.autoplay,set:t=>{g.autoplay=t,t&&g.readyState>=4&&l.play()}}),h(l,"src",{get:()=>s.url,set:t=>{s.url=t,S().then(()=>{s.autoplay&&l.play()})}}),h(l,"playbackRate",{get:()=>g.playbackRate,set:r=>{g.playbackRate=Math.max(.25,Math.min(2,r)),f&&fLine truncated