Feature (mux-player): add playlists and/or video queue

[aminamos]

Adding muxinc/media-chrome#97 for other reference

[dylanjha]

Good idea!

This won't work today, but I wonder if something like this would be a good solution (leveraging the <media-playlist> element you linked.

<media-playlist>
  <mux-player playback-id="xxx-123"></mux-player>
  <mux-player playback-id="xxx-456"></mux-player>
  <mux-player playback-id="xxx-789"></mux-player>
</media-playlist>

I think we'd probably keep the playlist-specific code out of Mux Player, but implement it in a way like something above

[doddielgabry]

Hi @dylanjha 👋 Is <media-playlist> an element we can use? With this method, would you get 3x different <mux-player>'s or would Mux know that they're part of the same defined element, i.e. a single video player? Also, how would Mux data attributes work for each video asset?

[luwes]

Actually media-playlist has a way to create a playlist of Mux players today! 🎉

I whipped up an example here
https://codesandbox.io/s/mux-player-media-playlist-ntj11i?file=/index.html

This is the how the HTML looks like. Attributes that are set on media-playlist-item are copied over to the element that is loaded where the type attribute indicates the element that is loaded. There are a bunch of custom media elements that could be plugged in the playlist. See the list at this link https://www.media-chrome.org/en/media-slot

    <media-playlist loop>
      <media-playlist-item
        type="mux-player"
        playback-id="DVBhwqkhxkOiLRjUAYJS6mCBJSuC00tB4iWjJmEofJoo"
        stream-type="on-demand"
      ></media-playlist-item>
      <media-playlist-item
        type="mux-player"
        playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
        stream-type="on-demand"
      ></media-playlist-item>
    </media-playlist>

[doddielgabry]

Hey @luwes that's awesome news. I was wondering, this method seems to diminish the default player settings with <media-controller> which I quite liked the flexibility of (especially how customizable it was with web components) and instead resorts to <mux-player> defaults, which isn't as easy to customize. Is there any way to implement this using <media-controller>?

[luwes]

yes this is possible with https://github.com/muxinc/media-playlist
see this example https://github.com/muxinc/media-chrome/blob/main/examples/media-elements/media-playlist.html

[doddielgabry]

Thanks! Definitely a flexible approach for implementing various media elements; but it's a bit too far from using Mux effectively. I thought resorting to <media-controller> would give us more control, but what if we went back to your initial example, and customized the Mux player or other Mux attributes (e.g. adding metadata tags) via <media-playlist-item>? Currently, things like controls="none"; or even creating a <style> element in the header customizing the <media-playlist-item> doesn't work for me; but ideally, I'd like to make use as many MUX attributes as possible with each video asset within my playlist. I'm basically trying to do something like this:

<media-controller
  slot="media"
  metadata-viewer-user-id="Host ID"
  stream-type="on-demand"
  autoplay
>
  <mux-video
    playback-id="ZUPFCMnQNu2eAIYWoKRV7z6P8EJlg00HGK02yGoJOtvqQ"
    metadata-video-title="Cinebur Logo"
  ></mux-video>
  <mux-video
    playback-id="rKSofQtU014qKzSoIFRVrHImJVNOUu5HzRYR00u5LZ1sA"
    metadata-video-title="Cinebur Countdown"
  ></mux-video>
  <mux-video
    playback-id="BCfheqgiZP5Kn00hYdnqpr02FQXiO3Mh3tkuHSOV00rkQo"
    metadata-video-title="Cinebur Intro"
  ></mux-video>
</media-controller>