0

I've got a project I'm working on implementing auto playing html5 video in a pop up window on hover. Everything is working close to fine however, in Chrome, when you hover over a video there is a small black box in the popup for a split second.

Now, I'm sure this has something to do with the time it takes to pull the video and load it. I'm just not sure on how to combat it efficiently. Maybe delay the playing somehow or make sure it's loaded before onMouseover()?

The project can be found here

Benjamin Trent
  • 7,378
  • 3
  • 31
  • 41
adanot
  • 318
  • 2
  • 21
  • you could signal the video to start with the `onMouseover()` and when you get your first image on the canvas then show the video. – Benjamin Trent Apr 22 '14 at 23:50
  • Thanks for the edits @bwtrent. Could you explain what you mean by "first image on the canvas"? – adanot Apr 22 '14 at 23:54

1 Answers1

1

You can just show a loading animation before the media is loaded. To know how, read this Tell whether video is loaded or not in Javascript To load all the videos before will be troublesome for the user if there are a lot of videos.

Checking whether video is ready

if ( yourVideoElement.readyState === 4 ) {
    // it's loaded
}
Community
  • 1
  • 1
Vishnuraj V
  • 2,819
  • 3
  • 19
  • 23
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Jason Aller Apr 23 '14 at 00:55
  • The link is to a question posted here itself. That's why i didn't give more details. – Vishnuraj V Apr 23 '14 at 04:58