muxinc / custom-video-element Goto Github PK

Related to muxinc/elements#60

This one is worth looking into I think.

Video events that are attached before the custom element is upgraded to the CustomVideoElement are not handled.

At the moment customVideo.addEventListener is forwarded to nativeVideo.addEventListener but only after upgrade.

What should happen is no forwarding from the event methods like addEventListener but customVideo should listen to all nativeVideo events internally and in the listener it should dispatch on the customVideo element, not like now where only a dispatch is done on nativeVideo.

Re: muxinc/hls-video-element#6

Need to support child text track elements as part of this approach.

I attempted to just use a slot inside the <video> and let track elements pass through naturally, but that doesn't work. Tracks need to be direct children of the native <video>, and slot children apparently don't count.

I think the best approach now is going to be a child tree mutation observer that copies track elements from the body of the custom element to the body of the video element. And then watch for updates and mimic them. Not the most exciting approach but should work for 99% of the use cases of tracks, if not all.

If the custom element is defined before the HTML is parsed no attributes will be available in the constructor and the attributes from the custom element won't be initialized. For example muted will not take effect.

This is not an issue when loading the module with <script type="module" src=""></script> but when loading the script with <script src=""></script> in the head of the page.

Quick thought on how this project could unlock some composability.

1. Allow a child slotted element to become the internal media element.

<custom-video>
  <video slot="media"></video>
</custom-video>

2. When that's true, you can stack functionality.

<media-chrome-stuff>
  <media-analytics-tracker slot="media"> (This is a <custom-video>)
    <media-ads slot="media">  (This is also a <custom-video>)
      <hls-video slot="media"></hls-video> (This is also a <custom-video>)
    </media-ads>
  </media-analytics-tracker>
</media-chrome-stuff>

Using custom-video for each of those components allows it apply its unique functionality, while passing through requests and passing up state from the underlying <video>.

(I feel like @cjpillsbury might hate this idea.)

Should we use a polyfill for Safari instead?
https://github.com/ungap/custom-elements

I tested this for a new project and seemed to work pretty well. Will report here if it breaks.

Interesting related tweet of the polyfill author
https://twitter.com/WebReflection/status/1527651779516694528

Cons: the polyfill seems more code and more complex code.

Pros: less deeply element nesting, events handling doesn't need anything special and events are dispatched on a native video element, polyfill is not needed for 60%+ of web.

For example if the src property is set, it should be reflected in the src attribute.

const reflectingAttrs = [
  'autoplay',
  'controls',
  'loop',
  'playsinline',
  'poster',
  'preload',
  'src',
]

When using <custom-video> -- or a subclass of <custom-video> for that matter -- the shadow dom is inserting <styles> that make the element deviate from the behavior of <video>.

For example, given code like this I would expect the elements to look visually identical:

<style>
  video,
  custom-video {
     width: 100%;
     max-width: 500px;
     border: 1px solid lightcoral;
  }
</style>

<video
  controls
  muted
  src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
></video>

<custom-video
  src="http://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
  controls
  muted
>
</custom-video>

Here's a code sandbox where you can see the height on <custom-video> is getting maxed out at 150px, and I actually can't find a good way around that without editing the styles of the <video> element inside the shadow dom (removing height: 100%;)