keep one video playing at all times about hover-video-player HOT 2 CLOSED

Hello, I apologize for taking so long to get back to this. I am assuming you found your own solution by now, but I will leave this comment for anyone who comes here in the future.

First, there is not a native way to achieve this behavior using only the hover-video-player component. You will need to build some custom stuff around it yourself, but it should hopefully be easier to do so now; previously, there were no APIs available for programmatically controlling playback state for hover-video-player components, but this is no longer the case as of v1.2.4.

Here is a code sandbox I made with a proof of concept for your described behavior.

To break down how I made this work...

I created a hover-video-player-group custom element which will grab all hover-video-player child elements and take control of them to ensure exactly one of them is always playing.

This leverages the following new features:

• Sets an initial data-playback-state attribute on the first player in the group so it will auto-play
• Sets all hover-video-player elements within the group to controlled mode
• Calls .hover() and .blur() methods to programmatically start/stop playback

from hover-video-player.

Thanks Ryan appreciate it.

from hover-video-player.