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

[jonjahr]

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]

Closed by #37

[weotch]

This is available in 2.3.0 now @jonjahr