CODEWITHSUNDEEP
javascriptjquerycsshtmlhtml5-video
adanot
adanot

Reputation: 328

Html5 video loading improperly

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

Upvotes: 0

Views: 93

Answers (1)

Vishnuraj V
Vishnuraj V

Reputation: 2869

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
}

Upvotes: 1

Related Questions