SoapButton#

The SoapButton is a custom button in the Video.js player that opens a specialized SoapMenu for browsing series and episodes. The SoapMenu presenting them in a videojs menu. Users can navigate through the episodes, and the menu dynamically adjusts based on available content.

Initialization#

To enable SoapButton need to add in following options:

controlBar: {
  soapButton: {
    xml: 'xml link' // Replace with the actual XML file URL
  }
}

XML Structure#

<playlist>
  <title>Test Series</title>
  <seasons>
    <season>
      <title>Test Season 1</title>
      <episode>
        <title>Test Episode 1</title>
        <image>https://example.com/test-image.jpg</image>
        <description>Test Episode Description</description>
        <url>https://example.com/test-episode.mp4</url>
        <duration>10:00</duration>
      </episode>
    </season>
  </seasons>
</playlist>

<playlist>: Root element for the content.
<title>: Name of the series (used for the menu header).
<seasons>: Wrapper for all seasons.
<season>: Represents a single season and contains its episodes.
- <title>: Name of the season.
  - <episode>: Contains details for each episode.
  - <title>: Name of the episode.
  - <image>: Thumbnail image for the episode.
  - <description>: Short description of the episode.
  - <url>: Link to the episode's video file.
  - <duration>: Duration of the episode in hh:mm:ss or mm:ss format.

Customization#

You can style the SoapButton and SoapMenu using the following CSS classes:

Class Name	Description
`vjs-soap-button`	Applied to the actual button element itself.
`vjs-soap-menu-button`	Applied to the wrapper/container of the button.
`vjs-soap-menu`	The main menu container.
`vjs-menu-title`	Title of the series or season in the menu.
`vjs-episode-container`	Wrapper for each episode's details.
`vjs-episode-item`	Individual episode entry.
`vjs-episode-details`	Container for episode's thumbnail and description.
`vjs-episode-duration`	Displays the duration of the episode.