Play/pause HTML videos from start to half to end on mouseover - html5-video

Question

I have a homepage displaying many mp4 <video> with different durations (less than 10 seconds each). They play independently on mouseover.
However, I want that some with a class like "demidemi" play half their total duration on each hover, as:
First mouseover of "demidemi" video plays from currentTime = 0 to duration/2 and pause
Second mouseover of "demidemi" video plays until the end
I have created a JSfiddle with the current HTML:
<video>
<source src="http://tacco.fr/divers/forward.mp4" type="video/mp4">
</video>
<video class="demidemi">
<source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
</video>
…and JS:
var vid = $("video");
var vidiv = $("video.demidemi");
vid.mouseover(function() {
$(this).get(0).play();
});
vidiv.addEventListener("timeupdate", function() {
if ($(this).get(0).currentTime = ($(this).get(0).duration)/2) {
$(this).get(0).pause
}
else {
$(this).get(0).play();
}
}, false);
If someone could help me it would be really really appreciated. Thank you :-)

Answer 1

I found another solution to get the behaviour.
It might be less efficient in terms of performance than the one suggested by Ken, but it's working without changing the HTML or CSS markup.
I played with addClass, hasClass, and removeClass for that… but not sure if it's the best approach. So again, I'm open if someone know how to improve that :-)
Here is the updated JSfiddle
var vid = $("video"),
vidiv = $("video.demidemi");
vid.mouseover(function() {
$(this).get(0).play();
});
vidiv.mouseover(function() {
if ( this.currentTime <= this.duration*0.5 ) {
$(this).addClass('firstHalf');
}
$(this).on("timeupdate", function() {
if ($(this).hasClass('firstHalf') && (this.currentTime) >= (this.duration)*0.5 ){
$(this).get(0).pause();
$(this).removeClass('firstHalf');
}
});
});