media-title

Displays the resolved content title for the current media

Anatomy

<media-title></media-title>

Behavior

The component shows the name of what is playing. It writes its own text, so set the title on the player instead of passing children.

<video-player content-title="Big Buck Bunny">
  <video src="video.mp4"></video>
  <media-title></media-title>
</video-player>

A title can come from three places. The player uses the first one that has a value:

contentTitle, the title you set.
The title the media reports about itself.
defaultContentTitle, the fallback you set for media that does not name itself.

If none of them has a value, the title is empty. The element stays in the page with no text, and data-has-title comes off so your CSS can hide it.

To change the title while the player is running, call setContentTitle on the store:

const player = document.querySelector("video-player");

player.store.setContentTitle("Sintel");

The title is part of the player’s chrome. It shows whenever a title exists and the controls are on screen, and it leaves when they do, so it never sits over the video on its own. An audio player has no controls that come and go, so its title stays on screen whenever there is one to show.

Styling

Two data attributes drive presentation:

data-has-title is present when a title exists. Use it to remove the element entirely when there is nothing to show, so a background or gradient never sits over empty space.
data-visible is present when the component decides the title should be shown. Use it for the transition.

media-title:not([data-has-title]) {
  display: none;
}

media-title {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

media-title[data-visible] {
  opacity: 1;
}

React renders a <span>. Add a className to style it:

.title:not([data-has-title]) {
  display: none;
}

.title {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.title[data-visible] {
  opacity: 1;
}

className and style also accept a function of component state when you would rather branch in JavaScript than in CSS:

<Title className={(state) => (state.visible ? "title title--visible" : "title")} />

Accessibility

The title is ordinary text, so it reaches assistive technology as content with no ARIA of its own. Hiding it with display: none when there is no title also removes it from the accessibility tree.

Fading the title out with opacity leaves it readable by a screen reader while it is not painted. That is deliberate — the name of what is playing stays relevant whether or not the controls happen to be on screen.

The component does not name the player. To give the player region an accessible name, set aria-label or aria-labelledby on the container yourself.

Examples

Basic Usage

Big Buck Bunny

import { createPlayer, PlayButton, Title } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

import './BasicUsage.css';

const Player = createPlayer({ features: videoFeatures });

export default function BasicUsage() {
  return (
    <Player.Provider contentTitle="Big Buck Bunny">
      <Player.Container className="react-title-basic">
        <Video loop muted playsInline src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
        <Title className="react-title-basic__title" />
        <PlayButton
          className="react-title-basic__button"
          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
        />
      </Player.Container>
    </Player.Provider>
  );
}

.react-title-basic {
  position: relative;
  display: block;
}

.react-title-basic video {
  display: block;
  width: 100%;
}

/* Hidden until a title resolves, so the gradient never sits over empty space. */
.react-title-basic__title:not([data-has-title]) {
  display: none;
}

.react-title-basic__title {
  position: absolute;
  inset-inline: 0;
  top: 0;
  padding: 16px 20px 48px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* The component decides when to show — the demo only reacts to it. */
.react-title-basic__title[data-visible] {
  opacity: 1;
}

.react-title-basic__button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

<video-player class="html-title-basic" content-title="Big Buck Bunny">
    <video
        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
        muted
        playsinline
        loop
    ></video>
    <media-title class="html-title-basic__title"></media-title>
    <media-play-button class="html-title-basic__button">
        <span class="show-when-paused">Play</span>
        <span class="show-when-playing">Pause</span>
    </media-play-button>
</video-player>

.html-title-basic {
  position: relative;
  display: block;
}

.html-title-basic video {
  display: block;
  width: 100%;
}

/* Hidden until a title resolves, so the gradient never sits over empty space. */
.html-title-basic__title:not([data-has-title]) {
  display: none;
}

.html-title-basic__title {
  position: absolute;
  inset-inline: 0;
  top: 0;
  padding: 16px 20px 48px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* The component decides when to show — the demo only reacts to it. */
.html-title-basic__title[data-visible] {
  opacity: 1;
}

.html-title-basic__button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.html-title-basic__button .show-when-paused {
  display: none;
}

.html-title-basic__button .show-when-playing {
  display: none;
}

.html-title-basic__button[data-paused] .show-when-paused {
  display: inline;
}

.html-title-basic__button:not([data-paused]) .show-when-playing {
  display: inline;
}

import '@videojs/html/video/player';
import '@videojs/html/ui/play-button';
import '@videojs/html/ui/title';

API Reference

State

State is accessible via the render, className, and style props.

State is reflected as data attributes for CSS styling.

Property	Type	Details
`title`	`string`
Description The resolved content title. Empty when no source supplied one.
`hasTitle`	`boolean`
Description Whether a title is present.
`visible`	`boolean`
Description Whether the title should be displayed.

Data attributes

Attribute	Type	Details
`data-has-title`
Description Present when a title is available to display.
`data-visible`
Description Present when the title should be displayed.