Migliorare il video HTML5 e il codice jQuery per essere più efficienti

Question

La mia pagina web contiene 5 video. Solo quando si passa il mouse sopra il video inizierà a suonare. Il mio codice per questo è la seguente:

$(".service:nth-child(1) a").hover(function(){ 
    $('.service:nth-child(1) a video#bgvid').get(0).play(); 
},function(){ 
    $('.service:nth-child(1) a video#bgvid').get(0).pause(); 
}); 

Ho usato :nth-child perché se mi passa il mouse sopra il video 4, gioca il video 1 quindi devo essere specifico. Ciò significa che devo ripetere il codice sopra riportato per ogni video, ma modificare il numero :nth-child di conseguenza. Non sono particolarmente abile con JS ma ci deve essere un modo migliore e più efficiente per farlo?

Answer 1

Non testato ma this dovrebbe iniziare. Ha, un gioco di parole. this. Prendilo?

$('.service a').hover(function(){ 
    $(this).children('video').get(0).play(); 
}, function(){ 
    $(this).children('video').get(0).pause(); 
}); 

Consulta anche: https://stackoverflow.com/a/28443915/362536

Answer 2

come Brad ha detto, usando this vi permetterà di ottenere l'elemento attualmente è passato il mouse. Tuttavia, per quanto ne so jQuery non dà accesso al video API HTML5 attraverso il loro oggetto, in modo avresti bisogno di fare qualcosa di simile:

$('.service a video').hover(function(e){ 
    e.target.play(); 
}, function(e){ 
    e.target.pause(); 
}); 

Quando si associa una funzione a un evento, this sarà sempre l'oggetto su cui è stato attivato l'evento. Chiamare il numero $(this) restituisce un oggetto jQuery'