Why are you uisng native event binding together with jQuery ?

Anyway, if you want to handle the events natively you can use the .bind method and pass the index of each video to the handlers

var figure = $(".video");
var vid = figure.find("video");

[].forEach.call(figure, function (item,index) {
    item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
    item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});

function hoverVideo(index, e) {
    vid[index].play(); 
}

function hideVideo(index, e) {
    vid[index].pause(); 
}

Demo at http://jsfiddle.net/gaby/0o8tt2z8/2/

Or you can go full jQuery

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }

Demo at http://jsfiddle.net/gaby/0o8tt2z8/1/

Shortest version would be this one

<div>
    <video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
    <source src="yourVideo.ogg" type="video/ogg"></source>
    </video>    
</div>

This way it would be a bit cleaner, if you desire that.

The hoverVideo() function specifically calls for the first instance of .thevideo, so hovering over either one will play the first video.

You have to grab the element that the event occurred on, then find the .thevideo element within that element:

var figure = $(".video");
var vid = $("video");

[].forEach.call(figure, function (item) {
  item.addEventListener('mouseover', hoverVideo, false);
  item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e) {
  $(this).find('.thevideo')[0].play();
}

function hideVideo(e) {
  $(this).find('.thevideo')[0].pause();
}

Here's an updated fiddle: http://jsfiddle.net/52mxdbgy/1/

Your function explicitly asks for the first video: $('.thevideo')[0].play(); (first element in array).

Therefore, you need to (at least) pass the index of the video to which you bind the actions to ensure the right video gets played and paused.

For example:

$(document).ready(function() {       
    $('.video').each(function(i, obj) {
        $(this).on("mouseover", function() { hoverVideo(i); });
        $(this).on("mouseout", function() { hideVideo(i); });
    });
});

function hoverVideo(i) {  
    $('.thevideo')[i].play(); 
}

function hideVideo(i) {
    $('.thevideo')[i].pause(); 
}

Where I use jQuery's .on() method so all methods are jQuery (instead of a mix with JavaScript).

You can see this in action in the following jsFiddle:

DEMO

Here the same without jQuery and with a bit ES6. ;)

for(let tupel of document.querySelectorAll('video')) {
  tupel.addEventListener('mouseover', (e) => {
    e.target.play()
  }, false);

  tupel.addEventListener('mouseout', (e) => {
    e.target.pause()
  }, false);
}