hover-video-player v1.3.0 is out! This is an exciting one as it finally resolves one of the most common requests I get on both this project and react-hover-video-player: “how do I use a YouTube video/Vimeo video/m3u8 stream?”
The answer has long been, “sorry, you can’t.” The hover-video-player component is built entirely on native
HTMLVideoElement APIs, and I am not going to do custom work just to accomodate some other service’s proprietary API (or in the case of m3u8, add an entire extra library just to support one media type).
Then I stumbled upon Mux’s excellent media-elements, a collection of
custom element libraries which provide HTMLMediaElement-compatible APIs for tons of different media sources,
including basically every one I’ve ever been asked about. This set off a light bulb: in theory,
if these custom elements implement all of the media element APIs which hover-video-player relies on,
they could probably be used in place of a video element.
This required a small amount of additional work to support due to a handful of things relying on the assumption
that we’re always working with a <video>, but it wasn’t too bad. And it works!
I will note that this feature isn’t flawless; these custom elements do their best, but they usually don’t perfectly
mimick all of an HTMLVideoElement’s behavior, and some of hover-video-player’s APIs will most likely
have weird interactions as a result. That’s a price I’m willing to pay though; just supporting these alternative
media sources at all is a big win which should hopefully help give people more options.
Here’s an example of how it works:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/youtube-video-element@1"
></script>
<hover-video-player>
<youtube-video
src="https://www.youtube.com/watch?v=aqz-KE-bpKQ"
playsinline
muted
></youtube-video>
</hover-video-player>As mentioned earlier, this feature gets requested heavily for my react-hover-video-player library as well,
but React is very unfriendly when it comes to composing/controlling child elements like this. I think it could be done,
but certainly not very elegantly. Since React has finally started coming around on web component support,
I think I will plan to just direct people toward hover-video-player for now, but I’ll keep thinking about it.
Happy hovering!