Video doesn't display anything if paused when mounted

[andrewrubin]

Description of the issue

Fully aware that this defeats the purpose of an "auto-playing video". But I think it should still work. The use-case here is that you may want prefersReducedMotion users to have the video start out as paused, but not render a static image fallback.

Steps to reproduce:

<AutoplayVideo
  src="your-video.mp4"
  posterImg="your-poster-image.jpg"
  description="This is a description of the video."
  paused={false}
/>

Potential solutions

I think this is happening because we're not listening to the video's canplay event before calling videoRef.current.pause(). It's trying to pause a video that doesn't have enough data loaded to even render the first frame.