muxinc / custom-media-element Goto Github PK

Custom media element is the successor of https://github.com/muxinc/custom-video-element.
It adds a way to easily extend the <audio> element in addition to the <video> element.

Several issues in custom-video-element are fixed in custom-media-element and adds a few new features.

• fixes the bug of attributes not being available in an eagerly upgraded custom video element
• the handling of attributes / properties is different than before in that it doesn't set properties by default in the attribute callback causing a potential endless loop if the override property was not gated e.g. if (this.loop == value) return;
• the observed attributes are limited to a static list that can be added on by the extending class.
• events can be attached before the custom media element is upgraded
• properties can be set before the custom media element is upgraded
• default templates and Events list is overridable
• adds CSS vars for object-fit and captions transform / transition
  

  custom-media-element/custom-media-element.js

  Lines 81 to 88 in 139ef83

  	object-fit: var(--media-object-fit, contain);
  	object-position: var(--media-object-position, 50% 50%);
  	}
  	video::-webkit-media-text-track-container {
  	transform: var(--media-webkit-text-track-transform);
  	transition: var(--media-webkit-text-track-transition);
  	}

• adds a CSS part video or audio for internal styling
• supports extending a custom built-in (e.g. castable-video)
• browser API's are gated so SSR (e.g. Next.js) doesn't break

The second param of toggleAttribute isn't the value, unless I'm not understanding the usage here.

https://github.com/muxinc/custom-media-element/blob/5d4bae32caada18e11b60c1ef0c1186cf7e9fd76/custom-media-element.js#LL236C12-L236C27