getContextぼかし効果、cantを見つける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は、ウィンドウオブジェクトではなく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); 
    }); 
};