0

I would like to preload a video when the user hovers a link. (The link takes you to a new page, and the videos are not on the page with the links). Currently, when the user clicks the link, there is a short pause before the video loads - I would like to remove this pause. When the user hovers the link, it seems like a good opportunity to download the video so that if they decide the click the link, their experience is smoother.

CONS: The user may not click the link, wasted bandwidth
PROS: Smoother experience

I have tried using preload on the video tag on the destination page. This doesn't help.

How to preload video

I have also tried nesting the video in the link, hidden, with preload set to false, and then used some JS to switch the preload to auto/true on hover - this doesn't download the file ahead of time - I presume the DOM is already built at this point and the change is picked up.

The HTML:

<a class="preload" href="link.html">
<h4>Title</h4>
<p>Text</p>
<video class="hide" src="vid.mp4" preload="false">
</a>

THE JS:

$('.preload').mouseenter(function(){
     var vid = this.childNodes[5];
     vid.preload = true;
});

The video preload changes to 'true' (or 'auto'), but in the Chrome network tab, the video is not being downloaded.

So - what's a good way to pre-fetch this video, based on the users intent (hover) - and is it such a bad idea? I've read a few posts that say it can be a drain for lurkers who never click on the links!

Sean Doherty
  • 2,273
  • 1
  • 13
  • 20
  • Hint: Hovering a video poster title does not relate to the users intent of watching a video, because hovering can happen by accident when scrolling down the page. I personally dislike such pages, that try to be smart in some way. Usually the web-devs can't guess my intention (which is: leave me alone with unwanted downloads) – feeela May 08 '19 at 11:47
  • I understand your concern but you're not really understanding the question. I'm not trying to force unwanted downloads on users, or even 2nd guess them - they have come to this site for information regarding services provided. EG - if I don't Lazyload images, and the user never scrolls to see them - are they classed as 'unwanted downloads'? Incidentally, the links are not poster titles - they are cards - large chunks of content. To re-iterate, the intention is to provide a smoother experience through the site (ie, removing the slight delay while the video loads). – Sean Doherty May 08 '19 at 12:50
  • 1
    two things... 1/ optimize your video for a fast start (eg https://stackoverflow.com/questions/27351136/preparing-mp4-file-for-html-5/27362604#27362604 ) and 2/ you could make an ajax request to preload the first {n}kb of the file to ensure metadata is cached... – Offbeatmammal May 08 '19 at 13:05

0 Answers0