1import{_ as u,c as d,b as s,a as c,e as r,r as k,o as v}from"./app-BgYE7jZN.js";const m={methods:{playVideo(){this.$refs.bgVideoRef.play()},pauseVideo(){this.$refs.bgVideoRef.pause()},initCanvas(){var a=this._canvas=this.$refs.videoBg;this._ctx=a.getContext("2d")},initVideo(){const a=this._canvas,n=this._ctx,p=this.$refs.bgVideoRef,i=p.style.display;let e=1;p.style.display="block",p.addEventListener("loadeddata",()=>{a.width=p.videoWidth,a.height=p.videoHeight,e=p.videoHeight/p.videoWidth,p.style.display=i,t()});function t(){n.drawImage(p,0,0,a.width,a.width*e),requestAnimationFrame(t)}}},mounted(){const a=this;a.initCanvas(),a.initVideo()}},b={id:"canvas-draw-video--wrapper"},g={ref:"bgVideoRef",crossorigin:"anonymous",playsinline:"",loop:""},h={class:"canvas-container"},y={ref:"videoBg"};function f(a,n,p,i,e,t){const o=k("SocialBlock");return v(),d("div",null,[n[3]||(n[3]=s("h1",{id:"å¦ä½æ-video-ç«å¨-canvas-ä¸",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#å¦ä½æ-video-ç«å¨-canvas-ä¸"},[s("span",null,"å¦ä½æ Video ç«å¨ Canvas ä¸")])],-1)),c(o,{hashtags:"javascript,canvas,video,fullpage"}),n[4]||(n[4]=s("p",null,"Hi 大家好ï¼ææ¯ Johnnyï¼ä»å¤©éç¯ä¾ä»ç´¹åå°ç©æï¼å¦æ¨é¡ï¼è©²æ麼æ Video ç«å¨ Canvas ä¸å¢ï¼",-1)),n[5]||(n[5]=s("h2",{id:"èæ¯",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#èæ¯"},[s("span",null,"èæ¯")])],-1)),n[6]||(n[6]=s("p",null,"æ Video ç«å¨ Canvas ä¸å¯ä»¥æå¾å¤ç¨èï¼æ¯å¦æåå¯ä»¥å°å½±åèæ¯é²è¡å³ææ¹è®ï¼ææ¯çµ¦äºå ¶ä»æ´å¤§çåµææä½å½æ§ï¼ä½...åµæé¨ä»½å°±ç給大家ç¼æ³äºï¼æ¬ç¯æå°æ³¨å¨å¦ä½è½æçéç¨ä¸æ~",-1)),n[7]||(n[7]=s("h2",{id:"實éææ",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#實éææ"},[s("span",null,"實éææ")])],-1)),n[8]||(n[8]=s("p",null,"æ¬ç¯æ以 Vue ä¾å¯¦ä½ï¼ä¸éä¸ææ¶å太è¤éç使ç¨ï¼åªéè¦å¤§æ¦æåºç¤å°±å¥½",-1)),n[9]||(n[9]=s("p",null,"實ä½åï¼å 實éå±ç¤º Canvas å½±çææ給大家ç~",-1)),n[10]||(n[10]=s("p",null,"試èæææ©ææ©«ãæ¾ç´ççææå§!",-1)),s("div",b,[s("button",{style:{"margin-right":"12px"},onClick:n[0]||(n[0]=(...l)=>t.playVideo&&t.playVideo(...l))},"Play"),s("button",{onClick:n[1]||(n[1]=(...l)=>t.pauseVideo&&t.pauseVideo(...l))},"Pause"),s("video",g,[...n[2]||(n[2]=[s("source",{src:"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},null,-1)])],512),s("div",h,[s("canvas",y,null,512)])]),n[11]||(n[11]=r(`<h2 id="實ä½" tabindex="-1"><a class="header-anchor" href="#實ä½"><span>實ä½</span></a></h2><p>é¦å æåæ video å æ£ç¢ºé¡¯ç¤ºå¨ç¶²é ä¸é¢ï¼å¦ä¸ç¯ä¾:</p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 2<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">playsinline</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span></span> 3<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> 4<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></span> 5<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 6<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>æ該就è½çå°æå帥氣çå½±çåºç¾æ~</p><p>æ¥èæåå°å½±çé±èèµ·ä¾ï¼ä¸¦æ·»å æåçç®æ¨ Canvasï¼é çå ©å ref å¾ å¾çºä½¿ç¨</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token selector">#app</span> <span class="token punctuation">{</span></span> 7<span class="line"> <span class="token selector">video</span> <span class="token punctuation">{</span></span> 8<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span> 9<span class="line"> <span class="token punctuation">}</span></span> 10<span class="line"> <span class="token selector">canvas</span> <span class="token punctuation">{</span></span> 11<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span> 12<span class="line"> <span class="token punctuation">}</span></span> 13<span class="line"><span class="token punctuation">}</span></span> 14<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 15<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bgVideoRef<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span> <span class="token attr-name">playsinline</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span></span> 16<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> 17<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></span> 18<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
18videoBg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span></span> 19<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 20<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>æ¥èèçæåç主è¦é輯ï¼ééç£è½å½±ç <code>loadeddata</code> äºä»¶ï¼åå¾å½±çç實é寬é«æ¯ä¾ï¼ä¸¦å° canvas ç pixel resolution è¨çºå½±ç寬é«ï¼éééåæ¹å¼æè½ç¶æåå½±ççç«è³ªæ£ç¢ºï¼å¦åé è¨ canvas ç pixel æ¯ä¾ææ¯ 300x150</p><blockquote><p>canvas å ç´ ä¸ç width, height 並ä¸å®å®åªå½±é¿ DOM 寬é«ï¼èæ¯çæ£å½±é¿ç«å¸ç pixel resolutionï¼ç¨ css style å½±é¿çææ¯é¡¯ç¤ºç寬é«ï¼æ以å³ä½¿ä½ ç¨ css å»è¨å® canvasï¼å¦ææ²ææ確å»å®ç¾© width, height 屬æ§ï¼é£éº¼å §å®¹ç pixel resolution å°±ä»ç¶æ¯é è¨çé ç½®</p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">// çºæ±æ¹ä¾¿ç´æ¥ç¨ option API æ°å¯«ç~</span></span> 21<span class="line">Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> 22<span class="line"> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 23<span class="line"> <span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">this</span></span> 24<span class="line"> vm<span class="token punctuation">.</span><span class="token function">initCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> 25<span class="line"> vm<span class="token punctuation">.</span><span class="token function">initVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> 26<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 27<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 28<span class="line"> <span class="token function">initCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 29<span class="line"> <span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">this</span></span> 30<span class="line"> <span class="token keyword">var</span> canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>
30videoBg<span class="token punctuation">;</span></span> 31<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>_ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 32<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 33<span class="line"> <span class="token function">initVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 34<span class="line"> <span class="token keyword">const</span> canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_canvas<span class="token punctuation">;</span></span> 35<span class="line"> <span class="token keyword">const</span> ctx <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_ctx<span class="token punctuation">;</span></span> 36<span class="line"> <span class="token keyword">const</span> videoEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>bgVideoRef<span class="token punctuation">;</span></span> 37<span class="line"> <span class="token keyword">const</span> _display <span class="token operator">=</span> videoEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display<span class="token punctuation">;</span></span> 38<span class="line"> <span class="token keyword">let</span> ratio <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span></span> 39<span class="line"></span> 40<span class="line"> videoEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'block'</span><span class="token punctuation">;</span></span> 41<span class="line"> videoEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'loadeddata'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> 42<span class="line"> <span class="token comment">// set canvas pixel resolution</span></span> 43<span class="line"> canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> videoEl<span class="token punctuation">.</span>videoWidth<span class="token punctuation">;</span></span> 44<span class="line"> canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> videoEl<span class="token punctuation">.</span>videoHeight<span class="token punctuation">;</span></span> 45<span class="line"> <span class="token comment">// get video ratio</span></span> 46<span class="line"> ratio <span class="token operator">=</span> videoEl<span class="token punctuation">.</span>videoHeight <span class="token operator">/</span> videoEl<span class="token punctuation">.</span>videoWidth<span class="token punctuation">;</span></span> 47<span class="line"> <span class="token comment">// recover videoEl display</span></span> 48<span class="line"> videoEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> _display<span class="token punctuation">;</span></span> 49<span class="line"> <span class="token comment">// create fabric image</span></span> 50<span class="line"> <span class="token function">drawVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 51<span class="line">
51 <span class="token comment">// start</span></span> 52<span class="line"> videoEl<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 53<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 54<span class="line"></span> 55<span class="line"> <span class="token keyword">function</span> <span class="token function">drawVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 56<span class="line"> ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span></span> 57<span class="line"> videoEl<span class="token punctuation">,</span></span> 58<span class="line"> <span class="token number">0</span><span class="token punctuation">,</span></span> 59<span class="line"> <span class="token number">0</span><span class="token punctuation">,</span></span> 60<span class="line"> canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span></span> 61<span class="line"> canvas<span class="token punctuation">.</span>width <span class="token operator">*</span> ratio</span> 62<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span> 63<span class="line"> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>drawVideo<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 64<span class="line"> <span class="token punctuation">}</span></span> 65<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 66<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 67<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span></span> 68<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>å¦æéææåå¸æè®å½±çè½å¤ èªé©æï¼ä¸¦ä¸å§çµå¡«æ»¿ç«é¢ï¼èå° CSS æ¹çºå¦ä¸</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token selector">#app</span> <span class="token punctuation">{</span></span> 69<span class="line"> <span class="token selector">video</span> <span class="token punctuation">{</span></span> 70<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span> 71<span class="line"> <span class="token punctuation">}</span></span> 72<span class="line"> <span class="token selector">canvas</span> <span class="token punctuation">{</span></span> 73<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span></span> 74<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span></span> 75<span class="line"> <span class="token punctuation">}</span></span> 76<span class="line"><span class="token punctuation">}</span></span> 77<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>éæ¨£å¯«ä½ æç¼ç¾ï¼æåç Canvas 就被æ伸äº~NO~~!! å½±çå §å®¹æ¯æ填滿ç«é¢æ²é¯ï¼ä½æ¯æ¯ä¾æ´åè·æå¦~</p><p>大家ççè½æ麼解ï¼5,4,3,2,1...</p><p>æ²é¯ï¼ç´æ¥å¨ Canvas å¤é¢åå ä¸å±¤ <code>.canvas-container</code> 並ä¸å°å §é¨ç Canvas è¨çº <code>object-fit</code> ï¼æå®!!</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token selector">#app</span> <span class="token punctuation">{</span></span> 78<span class="line"> <span class="token selector">video</span> <span class="token punctuation">{</span></span> 79<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span> 80<span class="line"> <span class="token punctuation">}</span></span> 81<span class="line"> <span class="token selector">.canvas-container</span> <span class="token punctuation">{</span></span> 82<span class="line"> <span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span></span> 83<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span></span> 84<span class="line"> <span class="token selector">canvas</span> <span class="token punctuation">{</span></span> 85<span class="line">
85 <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span> 86<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span> 87<span class="line"> <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span></span> 88<span class="line"> <span class="token punctuation">}</span></span> 89<span class="line"> <span class="token punctuation">}</span></span> 90<span class="line"><span class="token punctuation">}</span></span> 91<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>é£ä»å¤©çå享就å°ééæï¼å¸æ大家æåæ¡ï¼ä¹æ¡è¿å¤§å®¶å享給æ´å¤äººççç©ç©çï¼è¬è¬å¤§å®¶ =V=~</p>`,17)),c(o,{hashtags:"javascript,canvas,video,fullpage"}),n[12]||(n[12]=s("h2",{id:"åè",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#åè"},[s("span",null,"åè")])],-1)),n[13]||(n[13]=s("ul",null,[s("li",null,[s("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas",target:"_blank",rel:"noopener noreferrer"},"MDN Web Doc")]),s("li",null,[s("a",{href:"http://fabricjs.com/video-element",target:"_blank",rel:"noopener noreferrer"},"Fabricjs Demo")])],-1))])}const j=u(m,[["render",f]]),q=JSON.parse('{"path":"/articles/js/canvas-draw-video.html","title":"å¦ä½æ Video ç«å¨ Canvas ä¸","lang":"zh-TW","frontmatter":{},"git":{"updatedTime":1748788505000,"contributors":[{"name":"johnnywang","username":"johnnywang","email":"[email protected]","commits":3,"url":"https://github.com/johnnywang"},{"name":"johnnywang1994","username":"johnnywang1994","email":"[email protected]","commits":1,"url":"https://github.com/johnnywang1994"},{"name":"Lindy Liao","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"f01bfa128b4d33fbeddb8abb1697b5391b273d28","time":1748788505000,"email":"[email protected]","author":"Lindy Liao","message":"UPD"},{"hash":"21bfe127e8dd93dadea6388c32f1bacec31bed24","time":1649641308000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: fix video canvas playsinline mobile"},{"hash":"ce64def3c5e0af55c4649e5d0e0b64a9c7f22b43","time":1649160854000,"email":"[email protected]","author":"johnnywang","message":"UPD"},{"hash":"1eb856d770406e3e999551980edf3a1e8389db6c","time":1649160396000,"email":"[email protected]","author":"johnnywang","message":"UPD: update video"},{"hash":"3c7dd734c9ea1f735ff63187777d90e8c9dd6f71","time":1649159185000,"email":"[email protected]","author":"johnnywang","message":"UPD: add canvas-draw-video"}]},"filePathRelative":"articles/js/canvas-draw-video.md"}');export{j as comp,q as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.