getContext模糊效果，找不到this.prev（'canvas'）？

Question

HTML：

<div class="span"> 
     <canvas></canvas> 
     <video autoplay loop muted onloadeddata="loaded(this)"> 
     <source src="xxx.mp4" type="video/mp4"> 
     </video> 
</div> 
<div class="span"> 
     <canvas></canvas> 
     <video autoplay loop muted onloadeddata="loaded(this)"> 
     <source src="yyy.mp4" type="video/mp4"> 
     </video> 
</div> 

JS：

function draw(v, c, w, h) { 
    if (v.paused || v.ended) return false; 
    c.drawImage(v, 0, 0, w, h); 
    setTimeout(draw, 1, v, c, w, h); 
}; 
function loaded(vid) { 
    $(vid).on('play', function() { 
     var $this = $(vid).prev('canvas'),//this one dont work? 
     $this = $('canvas').get(0),//i dont want this get(x), i need "this" 
     cw = Math.floor($this.clientWidth/1), 
     ch = Math.floor($this.clientHeight/1); 
     $this.width = cw; 
     $this.height = ch; 
     draw(this, $this.getContext("2d"), cw, ch); 
    }); 
}; 

爲什麼我不能找到 「這個」 ???

$ this = $（vid）.prev（'canvas'），//這個不工作？

$此= $（ '畫布'）得到（0），//我不想這樣得到（X），我需要 「這個」

感謝的人，幫我解決這個問題。 https://codepen.io/anon/pen/YrJqwQ

Answer 1

prev()返回一個jQuery對象。您需要的是獲得您可以使用的畫布元素$(vid).prev('canvas').get(0)或$(this).prev('canvas').get(0)

例如，

function loaded(vid) { 
    $(vid).on('play', function() { 
     var canvas = $(this).prev('canvas').get(0); 
     cw = Math.floor(canvas.clientWidth/1), 
     ch = Math.floor(canvas.clientHeight/1); 
     canvas.width = cw; 
     canvas.height = ch; 
     draw(this, canvas.getContext("2d"), cw, ch); 
    }); 
}; 

Answer 2

的問題，從這一行開始：

<video autoplay loop muted onloadeddata="loaded(this)"> 

this這裏指的是window對象，而不是video元素。

一種解決方案來解決它會是如下所示：

HTML：

<div class="span"> 
     <canvas></canvas> 
     <!-- remove "this" here because it won't be used --> 
     <video autoplay loop muted onloadeddata="loaded()"> 
     <source src="xxx.mp4" type="video/mp4"> 
     </video> 
</div> 
<div class="span"> 
     <canvas></canvas> 
     <!-- remove "this" here because it won't be used --> 
     <video autoplay loop muted onloadeddata="loaded()"> 
     <source src="yyy.mp4" type="video/mp4"> 
     </video> 
</div> 

JS：

function draw(v, c, w, h) { 
    if (v.paused || v.ended) return false; 
    c.drawImage(v, 0, 0, w, h); 
    setTimeout(draw, 1, v, c, w, h); 
}; 

/* 
Instead of "vid" argument use "this" keyword. 
"this" will refer to video element here. 
*/ 
function loaded() { 
    $(this).on('play', function() { 
     var $this = $(this).prev('canvas'),//this one dont work? 
     $this = $('canvas').get(0),//i dont want this get(x), i need "this" 
     cw = Math.floor($this.clientWidth/1), 
     ch = Math.floor($this.clientHeight/1); 
     $this.width = cw; 
     $this.height = ch; 
     draw(this, $this.getContext("2d"), cw, ch); 
    }); 
};