Play HTML5 video on hover causing poster to not show, video delayed

Question

Ok, have a strange problem here that i'm hoping someone will be able to shed some light on. The site in question is here: http://tlt.voltronik.co.uk - Please scroll down to the Latest Clip / Most Popular Clips section.

There are a few videos that when hovered over, should play. I've set the poster to be a relevant frame of the video so that they won't always use the first frame as it's not always the most appropriate. Here's the js i'm using for the play/pause on hover:

var vid = document.getElementsByClassName("video-hover");

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

function hoverVideo(e) {   
  this.play();
}

function hideVideo(e) {
  this.pause();
}

The problem is (as you might have already discovered) is that sometimes the posters show and sometimes they don't. Sometimes they all load without fail and sometimes none of them do. Most of the time however, when they do show, you hover over a video and nothing happens. You have to move the mouse cursor off of the video, then re-hover over the video for the video to play.

I attempted to compensate for the posters not showing by setting a background image of the poster to sit behind the video but this doesn't seem to show properly either.

I don't think it's anything to do with the rgba background or the parallax style video playing behind because this behaviour is also visible on the 'Timelapse Clips' page too.

Can anyone shed any light on why this might be happening?

Answer 1

Move the mp4 source tag above the webm.

The first time the video takes a moment to play because it has to load. You could set preload="auto" to avoid this delay.

Answer 2

I had the same problem you were having. Though this doesn't address the poster issues, it achieves what I think you're hoping for. I had to remove the poster altogether and add an image with a display:none class that I add on hover with jQuery. Here's my pen: http://codepen.io/rhenwilson/pen/zIcBC .

var figure = $("figure")
var vid = $("video");
var cover = $(".img-cover")
$(figure).hover(function()
       { $(cover).addClass("img-hide");
}, function()
        { $(cover).removeClass("img-hide");
}
);

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

function hoverVideo(e) {  
        this.play();
}

function hideVideo(e) {
        this.pause();
}