<octopod-player>: The Podcast Embed element

The <octopod-player> element is used to embed podcasts in HTML documents. It wraps around an HTML Media element such as <audio> and adds features listeners have come to expect from podcast players like cover art, custom playback speed and back/forward shortcuts.

<octopod-player
  src="https://mp3s.nashownotes.com/PC20-07-2020-10-16-Final.mp3"
></octopod-player>

The above example shows basic usage of the <octopod-player> element by only specifying a path inside the src attribute to the media we want to play. We can include other attributes to specify information such as a path to cover art, a path to a chapters file and media options.

Attributes

This element's attributes include the global attributes.

• chapters
  The URL of the media chapters for the active media.

• image
  The URL of the cover image for the active media.

• mode
  This enumerated attribute indicates how the player is displayed:

  • audio Only show audio controls
  • cover Show cover image and audio controls

  Its default value is audio.

• src
  The URL of the media to play. Playback is delegated to a real instance of HTMLMediaElement. For more information, see the Media playback section.

Properties

This element inherits properties from its ancestors HTMLElement, Element, Node and EventTarget.

This element acts as wrapper around an instance of HTMLMediaElement, properties of the active media element can also be read and changed on this element.

• chapters (read-only)
  An array containing chapter information for the active media.

• chaptersUrl
  The URL of the media chapters for the active media.

• currentChapter (read-only)
  The current chapter information for the active media.

• imageUrl
  The URL of the cover image for the active media.

• mediaPlayer
  The wrapped HTMLMediaElement instance that's used for media playback.

• mode
  Indicates how the player is displayed, see the mode attribute for possible values.

Methods

This element inherits methods from its ancestors HTMLElement, Element, Node and EventTarget.

This element acts as wrapper around an instance of HTMLMediaElement, methods of the active media element can also be called on this element.

Events

This element inherits events from its ancestors HTMLElement and Element.

This element acts as wrapper around an instance of HTMLMediaElement, events emitted by the active media element will also be emitted by this element.

• loadedchapters
  Fired when chapter data has been loaded.

• chapterupdate
  Fired when the current chapter has been updated.