search

BKWLD / vue-visual

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.
https://bkwld.github.io/vue-visual
MIT License
59 stars 7 forks source link

videoLoaded never gets set to true in some instances when video is cached #36

Closed jonjahr closed 4 years ago

jonjahr commented 4 years ago

In some instances, the videoLoaded boolean never gets set to true. When I tested this, I found out that it's because the video element's canplaythrough event never fired. I think this is because the video was cached, and the video element triggered the canplaythrough event so quickly, it fired before Vue could register the event handler. One solution I found is to check the video readyState when the component mounts:

@videoLoaded = true if @$refs?.video?.readyState > 3

Here's a stack overflow that talks about this.

Annoyingly, I can't reproduce this on Netlify, or even in vue-visual Storybook. I can only reproduce this when I run my Nuxt stack on localhost. Maybe Nuxt slows down the mounting/hydration (only in dev mode) just enough for visual to miss the canplaythrough event? I don't know.

I'll send a pull request with the fix in a sec.

weotch commented 4 years ago

Closed by #37

weotch commented 4 years ago

This is available in 2.3.0 now @jonjahr