@cloudflare/stream-react

Official React component for Cloudflare Stream.

Installation

``sh
yarn add @cloudflare/stream-react
`

Usage

`js
import { Stream } from "@cloudflare/stream-react";

export const App = () => {
const videoIdOrSignedToken = "YOUR_VIDEO_ID_OR_SIGNED_TOKEN";
return (



);
};
`

Props

`ts
export type StreamProps = {
/**
* Either the video UID or the signed token for the video you’ve uploaded to Cloudflare Stream should be included here.
*/
src: string;
/**
* Ref for accessing the underlying Stream player API. Useful for providing imperative access:
* https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/using-the-player-api
*/
streamRef?: MutableRefObject;
/**
* URL to a VAST advertising tag. If specified, the player will attempt to display ads speficied by the VAST ad schema.
*/
adUrl?: string;
/**
* The height of the video’s display area, in CSS pixels.
*/
height?: string;
/**
* The width of the video’s display area, in CSS pixels.
*/
width?: string;
/**
* A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
*/
poster?: string;
/**
* Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don’t have unlimited Internet access before using this attribute.
*
* In addition, some browsers now prevent videos with audio from playing automatically. You may add the mute attribute to allow your videos to autoplay. For more information, go here.
*/
autoplay?: boolean;
/**
* Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player.
*/
controls?: boolean;
/**
* Use unique subdomain for iframe source
* customer-.cloudflarestream.com
*/
customerCode?: string;
/**
* Setting this value seeks the video to a new time. Note that seeking only occurs when a new value is set. If this is problematic for your use-case, consider using the streamRef prop to set the currentTime directly on
* the stream player which will seek every time the value is set.
*/
currentTime?: number;
/**
* A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
*/
muted?: boolean;
/**
* Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
letterboxColor?: string;
/**
* A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
*/
loop?: boolean;
/**
* A double that indicates the rate at which the media is being played back.
*/
playbackRate?: number;
/**
* This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may choose to include this attribute as a boolean attribute without a value, or you may specify the value preload="auto" to preload the beginning of the video. Not including the attribute or using preload="metadata" will just load the metadata needed to start video playback when requested.
*
* The ``