DailymotionVideo

The Dailymotion player plays videos inside a player configuration you create in Dailymotion Studio, and this component drives it through the Dailymotion Web SDK. Dailymotion refuses any embed that doesn’t name a player configuration, so every source carries a Player ID. See Create a Player in the official Dailymotion documentation.

Import

pnpm add @videojs/dailymotion-video

import { DailymotionVideo } from '@videojs/react/media/dailymotion-video';

Load a source

The simplest src is the player embed URL Dailymotion Studio gives you, which names both the player configuration and the video:

<DailymotionVideo src="https://geo.dailymotion.com/player/x8lr5.html?video=x84sh87" />

Specify the Player ID

These URLs name a video but no player configuration, so pair them with engine.dailymotion.player:

• Video page URLs: dailymotion.com/video/<id>
• Legacy embed URLs: dailymotion.com/embed/video/<id>, or geo.dailymotion.com/player.html?video=<id>, where they now redirect
• Short links: dai.ly/<id>

engine.dailymotion.player also wins over the configuration a player embed URL names. Configure the player in Dailymotion Studio covers where a Player ID comes from. Dailymotion’s runtime parameters go next to it:

<DailymotionVideo
  source={{
    src: 'https://www.dailymotion.com/video/x84sh87',
    engine: { dailymotion: { player: 'x8lr5', startTime: 10 } },
  }}
/>

The URL’s query can also carry Dailymotion’s startTime (or the older start), scaleMode, and customConfig[key]=value, as Dailymotion’s iframe embed reads them; engine.dailymotion wins over them. loop, autoplay, and mute come from the component’s own props.

Without a Player ID, the component reports a MEDIA_ERR_SRC_NOT_SUPPORTED error instead of creating a player Dailymotion would reject, and in development it logs a warning that points to engine.dailymotion.player. The SDK script is loaded from geo.dailymotion.com with the first player created on the page; under a Content Security Policy, allow that origin.

Use Dailymotion’s controls

Dailymotion’s Terms of Use don’t allow blocking any part of its embedded player, including its links back to Dailymotion. So the component always lets the player take pointer input, and Dailymotion’s own controls, logo, and links stay usable.

A skin doesn’t work over the player, which takes the pointer input over the video before the skin can see it, so use the component without one, as in Basic Usage.

Configure the player in Dailymotion Studio

Create a player configuration on the Players page in Dailymotion Studio. Its Player ID is the part of the player embed URL Studio gives you after /player/: x8lr5 in geo.dailymotion.com/player/x8lr5.html.

The player configuration decides what the embed can’t change at runtime:

Behavior

• Volume and mute both work, like a native <video>. Dailymotion has no separate mute, so muting sets its volume to 0 and unmuting restores the previous level.
• playbackRate takes Dailymotion’s rates, 0.25 to 2 in steps of 0.25. Dailymotion rounds any other value up to the next one and caps it at 2, and playbackRate then reports the rate it plays at.
• loop is passed to Dailymotion, which restarts the video itself.
• A new source loads into the same player while the Player ID and the runtime parameters other than startTime stay the same, whether they come from engine.dailymotion or the URL’s query. Any other change creates a new player, since Dailymotion only reads them when a player is created. So does autoplay, but only at the next load: call load() to apply a change right away. muted and loop change in place.
• Depending on the player configuration, Dailymotion may ignore a seek made before the video first plays, and playback then starts from the beginning. To start at a known position, set startTime on the source (under engine.dailymotion, or in the URL) instead: Dailymotion applies it on load.
• Seeking while paused stays paused, as on a native <video>. Dailymotion starts playback on a seek from its start or end screen, and the component pauses it again as it starts, unless an ad plays first.
• The SDK reports no buffered range, so buffered ends at the furthest point played.
• Ads play inside the embed, and the component never pauses one. paused follows the ad while it plays, but currentTime and duration always describe the video.
• When the browser refuses to start playback, as it does for unmuted autoplay, the component reports pause instead of playing.
• Fullscreen targets the element the player is built in.

Examples

Basic Usage

import { DailymotionVideo } from '@videojs/react/media/dailymotion-video';

export default function BasicUsage() {
  return (
    <div className="dailymotion-video">
      <DailymotionVideo muted src="https://geo.dailymotion.com/player/x8lr5.html?video=x84sh87" />
    </div>
  );
}

.dailymotion-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

{ src?: string; engine?: DailymotionSourceEngineConfig } | null

'fit' | 'fill' | 'fillLeft' | 'fillRight' | 'fillTop' | 'fillBottom' | undefined

const ref = useRef<HTMLDivElement>(null);

<DailymotionVideo ref={ref} />

import type { DailymotionAdapter } from '@videojs/dailymotion-video';

const mediaRef = useRef<DailymotionAdapter>(null);

<DailymotionVideo mediaRef={mediaRef} />

// In an event handler
mediaRef.current?.play();