Using Media Chrome with multiple video elements and media-group

[realflight1]

Hi all,
I read #274 and wanted to continue the discussion regarding media-group.

My use case is playing 1-4 videos together (e.g. 4 videos on a 2x2 grid), as well as single audio and subtitle tracks (one each). media-group is helpful in keeping everything in sync. I am wondering if I could use Media Chrome to provide controls for the whole media group? Example;

I thought about creating a custom element that will have the slot="media" attribute, hold the media elements and proxy calls to MediaGroupController. In general I am fine with one video element acting as the "leader", since I have to add the audio and subtitles tracks somewhere anyway, so I am wondering if there is a better solution than a custom element.

Note: something like Video Sprites is less appropriate here since those 1-4 videos come from a larger selection.

Thanks!

[luwes]

Hi! that should totally work, a custom video element will probably be the cleanest solution as it could be nested easily in media-controller as the media slot.

Have a look at https://github.com/muxinc/custom-video-element to help you out with that.
You're right that one video element would be the leader, the API calls would be made to that element and the rest should follow.
Let us know if you hit any snags.

---

I quickly hacked together an alternative solution without using a custom element here
https://codesandbox.io/s/media-group-quad-view-je3x0k?file=/index.html

The downside is that the control bar doesn't hide automatically as it's not nested in the media-controller.
It will need to be handled manually I believe.

[realflight1]

Thanks a lot for the quick response and the code sample! The alternative solution is simpler than I thought