Improving HTML5 video and jQuery code to be more efficient

Question

My web page has 5 videos on it. Only when you hover over the video will it begin to play. My code for this is as follows:

$(".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();
});

I have used :nth-child because if I hover over video 4, it plays video 1 so I have to be specific. This means I have to repeat the above code for every video but change the :nth-child number accordingly. I'm not particularly skilled with JS but there has to be a better and more efficient way of doing this?

Answer 1

Untested but this should get you started. Ha, a pun. this. Get it?

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

See also: https://stackoverflow.com/a/28443915/362536