getContext effet de flou, ne peux pas trouver 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); 
    }); 
}; 

pourquoi je ne peux pas trouver "ce" ???

$ this = $ (vid) .prev ('canvas'), // celui-ci ne fonctionne pas?

$ this = $ ('toile') get (0), // Je ne veux pas ce get (x), j'ai besoin "ce"

homme merci, aide-moi à résoudre ce problème. https://codepen.io/anon/pen/YrJqwQ

Answer 1

prev() retourne un objet jQuery. Ce dont vous avez besoin est d'obtenir l'élément de toile que vous pouvez faire avec $(vid).prev('canvas').get(0) ou $(this).prev('canvas').get(0)

par exemple.

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

le problème commence à partir de cette ligne:

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

this ici fait référence à l'objet de la fenêtre et non l'élément video.

Une solution pour y remédier serait comme suit:

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); 
    }); 
};