Skip to content
FrameworkStyle

Title

Displays the resolved content title for the current media

Anatomy

<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.

<Player.Provider contentTitle="Big Buck Bunny">
  <Player.Container>
    <Video src="video.mp4" />
    <Title />
  </Player.Container>
</Player.Provider>

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

  1. contentTitle, the title you set.
  2. The title the media reports about itself.
  3. 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:

function Rename() {
  const store = Player.usePlayer();

  return <button onClick={() => store.setContentTitle("Sintel")}>Rename</button>;
}

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.

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>
  );
}

API Reference

State

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

PropertyTypeDetails
titlestring
hasTitleboolean
visibleboolean

Data attributes

AttributeTypeDetails
data-has-title
data-visible