Home

Awesome

react-dailymotion

Dailymotion player component for React.

Install - Usage - Demo - Props

Install

npm install --save react-dailymotion

Usage

Demo - Demo source code

import Dailymotion from 'react-dailymotion';

<Dailymotion
  video="x2to0hs"
  uiTheme="light"
  autoplay
/>

Props

NameTypeDefaultDescription
videostringA string representing a video ID – of the form xID (e.g. xwr14q) for public-accessible videos or kID (e.g. kABCD1234) for private-accessible videos.
idstringDOM ID for the player element.
classNamestringCSS className for the player element.
widthnumber, stringWidth of the player element.
heightnumber, stringHeight of the player element.
pausedboolPause the video.
autoplayboolStarts the playback of the video automatically after the player loads.
controlsboolWhether to display the player controls or not. This parameter only removes the control bar, but keeps the startscreen and the endscreen (useful on mobile devices where the video tag needs a direct user interaction to start the playback).
showEndScreenboolWhether to enable the end screen or not.
muteboolWhether to mute the video or not.
originstringThe domain of the page hosting the Dailymotion player. You might want to specify origin for extra security.
qualityenum:<br> 'auto'<br> '240'<br> '380'<br> '480'<br> '720'<br> '1080'<br> '1440'<br> '2160'<br>'auto'Specifies the suggested playback quality for the video.
showQueueboolfalseWhether to show the Up Next queue.
autoplayQueueboolfalseWhether to play automatically the next item in the queue.
sharingboolWhether to display the sharing button or not.
startnumberSpecifies the time (in seconds) from which the video should start playing.
subtitlesstringSpecifies the selected subtitles language.
syndicationstringPasses your syndication key to the player.
uiHighlightColorstringChange the default highlight colour used in the controls (hex value). See the player customisation section in the Dailymotion docs for more on how this option is actually used.
uiShowLogoboolWhether to display the Dailymotion logo or not.
uiShowStartScreenInfoboolWhether to show video information (title and owner) on the start screen.
uiThemeenum:<br> 'light'<br> 'dark'<br>'dark'Choose the default base colour theme. See the player customisation section in the Dailymotion docs for more on how this option is actually used.
volumenumberSets the player's volume to the specified level, a number between 0 and 1.
onAdEndfunctionSent when the player reaches the end of an Ad media resource.
onAdPausefunctionSent when an Ad playback pauses.
onAdPlayfunctionSent when an Ad playback starts.
onAdStartfunctionSent when the player starts to play an Ad media resource.
onAdTimeUpdatefunctionSent on each Ad's time update.
onApiReadyfunctionSent when the player is ready to accept API commands.
onDurationChangefunctionSent when the duration of the video become available or change during playback.
onEndfunctionSent when playback has stopped at the end of the media resources set (ads + content).
onErrorfunctionSent when the player triggers an error.
onFullscreenChangefunctionSent when the player enters or exits fullscreen.
onLoadedMetadatafunctionSent when video's metadata are available.
onPausefunctionSent when playback pauses after the pause method returns.
onPlayfunctionSent when playback starts after the play method returns.
onPlayingfunctionSent when the content media resource playback has started.
onProgressfunctionSent when the browser is fetching the media data.
onQualitiesAvailablefunctionSent when qualities are available – see qualities for accepted values.
onQualityChangefunctionSent when the current quality changes.
onSeekedfunctionSent when the player has completed a seeking operation.
onSeekingfunctionSent when the player is starting to seek to another position in the video.
onSubtitleChangefunctionSent when the current subtitle changes.
onSubtitlesAvailablefunctionSent when subtitles are available.
onStartfunctionSent the first time the player attempts to start the playback, either because of a user interaction, an autoplay parameter, or an API call (e.g play(), load(), etc.).
onTimeUpdatefunctionSent when the playback position changes as part of normal playback or because of some other condition.
onVideoStartfunctionSent when the player starts to play the content media resource.
onVideoEndfunctionSent when the player reaches the end of the content media resource.
onVolumeChangefunctionSent when the player volume or mute state has changed.
onWaitingfunctionSent when the player has to stop video playback for further buffering of content.

Related

License

MIT