Interface: MediaItemElement

Abstract definition of a media item web component that can be used as a child of the IntegrationElement.

Example

It is possible to create more complex media items that query an own API.


<script>
  class CustomMediaItemElement extends HTMLElement {
    get data() {
      return fetch(`https://api.example.com/media/${this.getAttribute('id')}`)
      .then(response => response.json())
      .then((body) => ({
        id: this.getAttribute('id'),
        sources: body.sources,
        duration: body.duration,
        poster: body.poster,
        title: body.title
      }));
    }
  }
  window.customElements.define('custom-media-item', CustomMediaItemElement);
</script>
<glomex-integration
  integration-id="REPLACE_WITH_INTEGRATION_ID"
>
  <custom-media-item id="API_CONTENT_ID"></custom-media-item>
</glomex-integration>

Extends

HTMLElement

Properties

data

readonly data: MinimalMediaItem | MediaItem | (MinimalMediaItem | MediaItem)[] | Promise<MinimalMediaItem | MediaItem | (MinimalMediaItem | MediaItem)[]>