### Set Start Time and Preload in Cloudflare Stream React Player

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example shows how to control the initial playback position and preload behavior of the Cloudflare Stream player. The `startTime` prop can accept either a string in 'h:m:s' or 'm:s' format, or a number in seconds. The `preload` prop controls how much of the video should be loaded before playback starts.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function TimestampedVideo() {
  return (
    <div>
      {/* Start at 2 minutes 30 seconds using timestamp format */}
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        startTime="2m30s"
        preload="auto"
      />

      {/* Start at 150 seconds using numeric format */}
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        startTime={150}
        preload="metadata"
      />

      {/* Start at 1 hour 12 minutes 27 seconds */}
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        startTime="1h12m27s"
        preload="none"
      />
    </div>
  );
}

```

--------------------------------

### Install @cloudflare/stream-react using Yarn

Source: https://github.com/cloudflare/stream-react/blob/master/README.md

Installs the @cloudflare/stream-react package using the Yarn package manager. This is a prerequisite for using the Cloudflare Stream React components in your project.

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

--------------------------------

### Create a Fixed Size Cloudflare Stream React Player

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example demonstrates how to create a non-responsive, fixed-size Cloudflare Stream player by setting the `responsive` prop to `false` and explicitly defining the `height` and `width` props. This allows for precise control over the player's dimensions, useful for specific layout requirements.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function FixedSizePlayer() {
  return (
    <Stream
      controls
      src="4bcf13d23290043d9efb344b56200ebd"
      responsive={false}
      height="360px"
      width="640px"
      style={{ border: '2px solid #333' }}
    />
  );
}

```

--------------------------------

### Handle Cloudflare Stream Player Events in React

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example shows how to subscribe to standard HTML5 video events and Cloudflare Stream-specific advertising events. It uses React's `useState` hook to manage and display the player's playback state, current time, duration, and advertisement status. No external dependencies beyond `react` and `@cloudflare/stream-react` are required.

```tsx
import React, { useState } from 'react';
import { Stream } from '@cloudflare/stream-react';

function EventDrivenPlayer() {
  const [playbackState, setPlaybackState] = useState('idle');
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [adPlaying, setAdPlaying] = useState(false);

  return (
    <div>
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        adUrl="https://example.com/vast-ad-tag.xml"
        onLoadedMetaData={(e) => {
          const player = (e.target as any);
          setDuration(player.duration);
          console.log('Video duration:', player.duration);
        }}
        onPlay={() => setPlaybackState('playing')}
        onPause={() => setPlaybackState('paused')}
        onEnded={() => setPlaybackState('ended')}
        onTimeUpdate={(e) => {
          const player = (e.target as any);
          setCurrentTime(player.currentTime);
        }}
        onStreamAdStart={() => {
          setAdPlaying(true);
          console.log('Advertisement started');
        }}
        onStreamAdEnd={() => {
          setAdPlaying(false);
          console.log('Advertisement ended');
        }}
        onStreamAdTimeout={() => {
          console.warn('Advertisement timed out');
        }}
        onError={(e) => {
          console.error('Playback error:', e);
          setPlaybackState('error');
        }}
      />

      <div style={{ marginTop: '1rem' }}>
        <p>State: {playbackState}</p>
        <p>Time: {Math.floor(currentTime)}s / {Math.floor(duration)}s</p>
        {adPlaying && <p style={{ color: 'orange' }}>Ad Playing...</p>}
      </div>
    </div>
  );
}

```

--------------------------------

### Enable Text Tracks and Captions in Cloudflare Stream React Player

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example demonstrates how to initialize the Cloudflare Stream player with specific text tracks enabled for accessibility and multilingual support using the `defaultTextTrack` prop. Ensure that text tracks are uploaded to Cloudflare Stream first. The `defaultTextTrack` prop accepts BCP-47 language codes.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function CaptionedVideo() {
  return (
    <Stream
      controls
      src="4bcf13d23290043d9efb344b56200ebd"
      defaultTextTrack="en"
      poster="https://example.com/poster.jpg"
      onLoadedMetaData={(e) => {
        console.log('Video loaded with English captions enabled');
      }}
    />
  );
}

// Note: Text tracks must be uploaded to Cloudflare Stream first
// defaultTextTrack uses BCP-47 language codes (e.g., 'en', 'es', 'fr')

```

--------------------------------

### Custom React Player with Cloudflare Stream SDK

Source: https://context7.com/cloudflare/stream-react/llms.txt

This snippet shows how to use the `useStreamSDK` hook to directly access and control the Cloudflare Stream player within a React component. It allows for custom event listeners, volume control, and programmatic playback. Ensure `@cloudflare/stream-react` is installed.

```tsx
import React, { useEffect, useRef } from 'react';
import { useStreamSDK } from '@cloudflare/stream-react';

function CustomStreamPlayer() {
  const streamSdk = useStreamSDK();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    if (streamSdk && iframeRef.current) {
      const player = streamSdk(iframeRef.current);

      player.addEventListener('play', () => {
        console.log('Custom player started');
      });

      player.volume = 0.5;
      player.play().catch((err) => {
        console.error('Play failed:', err);
      });

      return () => {
        // Cleanup if needed
      };
    }
  }, [streamSdk]);

  if (!streamSdk) {
    return <div>Loading Stream SDK...</div>;
  }

  return (
    <iframe
      ref={iframeRef}
      src="https://iframe.cloudflarestream.com/4bcf13d23290043d9efb344b56200ebd"
      style={{ border: 'none', width: '100%', height: '500px' }}
      allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
      allowFullScreen
    />
  );
}

```

--------------------------------

### Use Direct URL Source in Cloudflare Stream React Player

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example demonstrates how to use a complete iframe URL directly as the source for the Cloudflare Stream player component. The component automatically detects URLs ending in `.videodelivery.net` or `.cloudflarestream.com` and uses them without constructing an iframe URL. This is useful for advanced configurations or when providing pre-built URLs.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function DirectUrlPlayer() {
  const fullUrl = "https://customer-abc123.cloudflarestream.com/4bcf13d23290043d9efb344b56200ebd/iframe?preload=auto&controls=true";

  return (
    <Stream
      src={fullUrl}
      title="Custom Video Player"
    />
  );
}

// The component detects URLs ending in .videodelivery.net or .cloudflarestream.com
// and uses them directly instead of constructing an iframe URL

```

--------------------------------

### Implement Autoplay with Mute in Cloudflare Stream React Player

Source: https://context7.com/cloudflare/stream-react/llms.txt

This example shows how to enable autoplay for the Cloudflare Stream player while respecting browser policies by setting both `autoplay` and `muted` props to `true`. The `loop` prop is also included for continuous playback. Note that most browsers require `muted=true` for autoplay to function, and mobile browsers might still need user interaction.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function AutoplayVideo() {
  return (
    <Stream
      controls
      src="4bcf13d23290043d9efb344b56200ebd"
      autoplay={true}
      muted={true}
      loop={true}
      preload="auto"
      onPlay={() => console.log('Autoplay succeeded')}
      onError={(e) => console.error('Autoplay failed:', e)}
    />
  );
}

// Note: Most browsers require muted=true for autoplay to work
// Mobile browsers may still require user interaction

```

--------------------------------

### Basic Usage of Stream Component in React

Source: https://github.com/cloudflare/stream-react/blob/master/README.md

Demonstrates how to import and use the Stream component from @cloudflare/stream-react within a React application. It shows how to pass a video ID or signed token as the src prop to display a video.

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

export const App = () => {
  const videoIdOrSignedToken = "YOUR_VIDEO_ID_OR_SIGNED_TOKEN";
  return (
    <div>
      <Stream controls src={videoIdOrSignedToken} />
    </div>
  );
};

```

--------------------------------

### Custom Subdomain (customerCode)

Source: https://context7.com/cloudflare/stream-react/llms.txt

Use a custom subdomain for branding and domain allowlisting requirements by providing the `customerCode` prop.

```APIDOC
## Custom Subdomain (customerCode)

### Description
Use a custom subdomain for branding and domain allowlisting requirements.

### Method
React Component

### Endpoint
N/A (Component)

### Parameters
#### Props
- **src** (string) - Required - The video ID.
- **customerCode** (string) - Required - Your Cloudflare Stream customer code to use a custom subdomain.
- **controls** (boolean) - Optional - Shows default video controls.
- **primaryColor** (string) - Optional - The primary color for the player controls.
- **letterboxColor** (string) - Optional - The color of the letterbox.

### Request Example
```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function BrandedPlayer() {
  return (
    <Stream
      controls
      src="4bcf13d23290043d9efb344b56200ebd"
      customerCode="abc123xyz"
      primaryColor="#0066CC"
      letterboxColor="transparent"
    />
  );
}

// Generated iframe URL: https://customer-abc123xyz.cloudflarestream.com/4bcf13d23290043d9efb344b56200ebd/iframe
```

### Response
#### Success Response (N/A - Component renders UI)

#### Response Example
N/A
```

--------------------------------

### Imperative Cloudflare Stream Player Control with Ref

Source: https://context7.com/cloudflare/stream-react/llms.txt

Demonstrates how to use a `useRef` with the `Stream` component to gain imperative control over the player. This allows programmatic manipulation of playback, seeking, and state changes, suitable for advanced player interactions.

```tsx
import React, { useRef } from 'react';
import { Stream, StreamPlayerApi } from '@cloudflare/stream-react';

function AdvancedPlayer() {
  const playerRef = useRef<StreamPlayerApi>();

  const handleSeek = () => {
    if (playerRef.current) {
      playerRef.current.currentTime = 30;
    }
  };

  const handlePlayPause = async () => {
    if (playerRef.current) {
      if (playerRef.current.paused) {
        await playerRef.current.play();
      } else {
        playerRef.current.pause();
      }
    }
  };

  const handleSpeedChange = (speed: number) => {
    if (playerRef.current) {
      playerRef.current.playbackRate = speed;
    }
  };

  return (
    <div>
      <Stream
        streamRef={playerRef}
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        muted={true}
        autoplay={true}
        volume={0.8}
        playbackRate={1.0}
      />

      <div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem' }}>
        <button onClick={handlePlayPause}>Play/Pause</button>
        <button onClick={handleSeek}>Jump to 30s</button>
        <button onClick={() => handleSpeedChange(1.5)}>1.5x Speed</button>
        <button onClick={() => handleSpeedChange(1.0)}>Normal Speed</button>
      </div>
    </div>
  );
}

```

--------------------------------

### Complete Interactive React Video Player with Cloudflare Stream

Source: https://context7.com/cloudflare/stream-react/llms.txt

This React component utilizes the @cloudflare/stream-react library to render a video player with comprehensive controls. It manages player state (playing, time, duration, volume, speed, mute) using React hooks and provides interactive buttons and sliders for user manipulation. Dependencies include React and the @cloudflare/stream-react package. It takes a stream source ID as input and outputs a controlled video player interface.

```tsx
import React, { useRef, useState, useEffect } from 'react';
import { Stream, StreamPlayerApi } from '@cloudflare/stream-react';

function CompleteExample() {
  const playerRef = useRef<StreamPlayerApi>();
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(1);
  const [speed, setSpeed] = useState(1);
  const [muted, setMuted] = useState(false);

  return (
    <div style={{ maxWidth: '900px', margin: '0 auto', padding: '2rem' }}>
      <Stream
        streamRef={playerRef}
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        volume={volume}
        playbackRate={speed}
        muted={muted}
        responsive={true}
        primaryColor="#6366F1"
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onEnded={() => setIsPlaying(false)}
        onTimeUpdate={(e) => {
          if (playerRef.current) {
            setCurrentTime(playerRef.current.currentTime);
          }
        }}
        onLoadedMetaData={() => {
          if (playerRef.current) {
            setDuration(playerRef.current.duration);
          }
        }}
        onVolumeChange={() => {
          if (playerRef.current) {
            setVolume(playerRef.current.volume);
            setMuted(playerRef.current.muted);
          }
        }}
        onRateChange={() => {
          if (playerRef.current) {
            setSpeed(playerRef.current.playbackRate);
          }
        }}
        onError={(e) => {
          console.error('Video error:', e);
        }}
      />

      <div style={{ marginTop: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <div>
          <strong>Status:</strong> {isPlaying ? 'Playing' : 'Paused'} |
          <strong> Time:</strong> {Math.floor(currentTime)}s / {Math.floor(duration)}s
        </div>

        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
          <button onClick={() => playerRef.current?.play()}>Play</button>
          <button onClick={() => playerRef.current?.pause()}>Pause</button>
          <button onClick={() => { if (playerRef.current) playerRef.current.currentTime = 0; }}>
            Restart
          </button>
          <button onClick={() => { if (playerRef.current) playerRef.current.currentTime -= 10; }}>
            -10s
          </button>
          <button onClick={() => { if (playerRef.current) playerRef.current.currentTime += 10; }}>
            +10s
          </button>
        </div>

        <div>
          <label>
            Volume: {Math.round(volume * 100)}%
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              value={volume}
              onChange={(e) => setVolume(Number(e.target.value))}
              style={{ marginLeft: '1rem' }}
            />
          </label>
        </div>

        <div>
          <label>
            Speed: {speed}x
            <select value={speed} onChange={(e) => setSpeed(Number(e.target.value))} style={{ marginLeft: '1rem' }}>
              <option value="0.5">0.5x</option>
              <option value="1">1x</option>
              <option value="1.25">1.25x</option>
              <option value="1.5">1.5x</option>
              <option value="2">2x</option>
            </select>
          </label>
        </div>

        <div>
          <label>
            <input
              type="checkbox"
              checked={muted}
              onChange={(e) => setMuted(e.target.checked)}
            />
            Muted
          </label>
        </div>
      </div>
    </div>
  );
}

export default CompleteExample;
```

--------------------------------

### Stream Component with Ref (Imperative Control)

Source: https://context7.com/cloudflare/stream-react/llms.txt

Access the underlying player API to programmatically control playback, seek to specific times, and read player state using a ref.

```APIDOC
## Stream Component with Ref (Imperative Control)

### Description
Access the underlying player API to programmatically control playback, seek to specific times, and read player state.

### Method
React Component with Ref

### Endpoint
N/A (Component)

### Parameters
#### Props
- **streamRef** (React.RefObject<StreamPlayerApi>) - Required - A ref object to access the player API.
- **src** (string) - Required - The video ID or signed token.
- **controls** (boolean) - Optional - Shows default video controls.
- **muted** (boolean) - Optional - Whether the video should be muted by default.
- **autoplay** (boolean) - Optional - Whether the video should autoplay.
- **volume** (number) - Optional - The default volume of the player (0 to 1).
- **playbackRate** (number) - Optional - The default playback rate of the player.

### Request Example
```tsx
import React, { useRef } from 'react';
import { Stream, StreamPlayerApi } from '@cloudflare/stream-react';

function AdvancedPlayer() {
  const playerRef = useRef<StreamPlayerApi>();

  const handleSeek = () => {
    if (playerRef.current) {
      playerRef.current.currentTime = 30;
    }
  };

  const handlePlayPause = async () => {
    if (playerRef.current) {
      if (playerRef.current.paused) {
        await playerRef.current.play();
      } else {
        playerRef.current.pause();
      }
    }
  };

  const handleSpeedChange = (speed: number) => {
    if (playerRef.current) {
      playerRef.current.playbackRate = speed;
    }
  };

  return (
    <div>
      <Stream
        streamRef={playerRef}
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        muted={true}
        autoplay={true}
        volume={0.8}
        playbackRate={1.0}
      />

      <div style={{ marginTop: '1rem', display: 'flex', gap: '0.5rem' }}>
        <button onClick={handlePlayPause}>Play/Pause</button>
        <button onClick={handleSeek}>Jump to 30s</button>
        <button onClick={() => handleSpeedChange(1.5)}>1.5x Speed</button>
        <button onClick={() => handleSpeedChange(1.0)}>Normal Speed</button>
      </div>
    </div>
  );
}
```

### Response
#### Success Response (N/A - Component renders UI)

#### Response Example
N/A
```

--------------------------------

### Signed Token Authentication

Source: https://context7.com/cloudflare/stream-react/llms.txt

Use signed tokens for secure video delivery with access controls and expiration times. The `src` prop should be the signed token string.

```APIDOC
## Signed Token Authentication

### Description
Use signed tokens for secure video delivery with access controls and expiration times.

### Method
React Component

### Endpoint
N/A (Component)

### Parameters
#### Props
- **src** (string) - Required - The signed token for secure video delivery.
- **controls** (boolean) - Optional - Shows default video controls.
- **poster** (string) - Optional - URL for a custom thumbnail image.
- **preload** (string) - Optional - Hint for how the video should be preloaded ('none', 'metadata', 'auto').
- **onError** (function) - Optional - Callback function for errors.

### Request Example
```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function SecureVideo() {
  const signedToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjU5ZDE0YjU3ZmI0YWU3MjE3YTU0YzY5YjcxMTQyMGFjIn0...";

  return (
    <Stream
      controls
      src={signedToken}
      poster="https://example.com/custom-thumbnail.jpg"
      preload="metadata"
      onError={(e) => {
        console.error('Authentication or loading error:', e);
      }}
    />
  );
}
```

### Response
#### Success Response (N/A - Component renders UI)

#### Response Example
N/A
```

--------------------------------

### Stream Component

Source: https://context7.com/cloudflare/stream-react/llms.txt

React component for embedding Cloudflare Stream videos with automatic SDK integration and responsive iframe management. It accepts various props to control playback, styling, and events.

```APIDOC
## Stream Component

### Description
React component for embedding Cloudflare Stream videos with automatic SDK integration and responsive iframe management.

### Method
React Component

### Endpoint
N/A (Component)

### Parameters
#### Props
- **controls** (boolean) - Optional - Shows default video controls.
- **src** (string) - Required - The video ID or signed token for the Cloudflare Stream video.
- **autoplay** (boolean) - Optional - Whether the video should autoplay.
- **muted** (boolean) - Optional - Whether the video should be muted by default.
- **loop** (boolean) - Optional - Whether the video should loop.
- **responsive** (boolean) - Optional - If true, the iframe will maintain aspect ratio.
- **primaryColor** (string) - Optional - The primary color for the player controls.
- **height** (string | number) - Optional - The height of the player.
- **width** (string | number) - Optional - The width of the player.
- **onPlay** (function) - Optional - Callback function when the video starts playing.
- **onEnded** (function) - Optional - Callback function when the video ends.
- **onError** (function) - Optional - Callback function when an error occurs.

### Request Example
```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function VideoPlayer() {
  return (
    <div style={{ maxWidth: '800px' }}>
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        autoplay={false}
        muted={false}
        loop={false}
        responsive={true}
        primaryColor="#FF6B35"
        height="480px"
        width="100%"
        onPlay={(e) => console.log('Video started playing')}
        onEnded={(e) => console.log('Video ended')}
        onError={(e) => console.error('Video error:', e)}
      />
    </div>
  );
}

export default VideoPlayer;
```

### Response
#### Success Response (N/A - Component renders UI)

#### Response Example
N/A
```

--------------------------------

### Branded Cloudflare Stream Player with Custom Subdomain

Source: https://context7.com/cloudflare/stream-react/llms.txt

Configures the Cloudflare Stream player to use a custom subdomain. This is useful for branding purposes and for domain allowlisting requirements, allowing videos to be served under a specific customer domain.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function BrandedPlayer() {
  return (
    <Stream
      controls
      src="4bcf13d23290043d9efb344b56200ebd"
      customerCode="abc123xyz"
      primaryColor="#0066CC"
      letterboxColor="transparent"
    />
  );
}

// Generated iframe URL: https://customer-abc123xyz.cloudflarestream.com/4bcf13d23290043d9efb344b56200ebd/iframe

```

--------------------------------

### Embed Cloudflare Stream Video Player with React

Source: https://context7.com/cloudflare/stream-react/llms.txt

Renders a Cloudflare Stream video player using the `Stream` component. It accepts various props for controlling playback, appearance, and responsive sizing. This is the primary component for basic video embedding.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function VideoPlayer() {
  return (
    <div style={{ maxWidth: '800px' }}>
      <Stream
        controls
        src="4bcf13d23290043d9efb344b56200ebd"
        autoplay={false}
        muted={false}
        loop={false}
        responsive={true}
        primaryColor="#FF6B35"
        height="480px"
        width="100%"
        onPlay={(e) => console.log('Video started playing')}
        onEnded={(e) => console.log('Video ended')}
        onError={(e) => console.error('Video error:', e)}
      />
    </div>
  );
}

export default VideoPlayer;
```

--------------------------------

### Define StreamProps type for Cloudflare Stream React component

Source: https://github.com/cloudflare/stream-react/blob/master/README.md

Defines the `StreamProps` type for the Cloudflare Stream React component. This type includes properties for configuring the video source, player behavior, styling, and advertising. The props are used to customize the video player.

```typescript
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<StreamPlayerApi | undefined>;
  /**
   * 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](https://webkit.org/blog/6784/new-video-policies-for-ios/).
   */
  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-<CODE>.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 <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
   */
  preload?: "auto" | "metadata" | "none" | boolean;
  /**
   * Any valid CSS color value provided will be applied to certain elements of the player's UI.
   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
   */
  primaryColor?: string;
  /**
   * A timestamp that specifies the time when playback begins.
   * If a plain number is used such as ?startTime=123, it will
   * be interpreted as 123 seconds. More human readable timestamps
   * can also be used, such as ?startTime=1h12m27s for 1 hour,
   * 12 minutes, and 27 seconds.
   */
  startTime?: string | number;
  /**
   * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
   */
  responsive?: boolean;
  /**
   * Sets volume from 0.0 (silent) to 1.0 (maximum value)
   */
  volume?: number;
  /**
   * Will initialize the player with the specified text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](https://developers.cloudflare.com/stream/uploading-videos/adding-captions).
   */
  textTrack?: string;
};

```

--------------------------------

### Secure Cloudflare Stream Video with Signed Tokens

Source: https://context7.com/cloudflare/stream-react/llms.txt

Embeds a Cloudflare Stream video using a signed token for authentication. This method is used for secure video delivery with access controls and expiration times, ensuring only authorized users can view the content.

```tsx
import React from 'react';
import { Stream } from '@cloudflare/stream-react';

function SecureVideo() {
  const signedToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjU5ZDE0YjU3ZmI0YWU3MjE3YTU0YzY5YjcxMTQyMGFjIn0...";

  return (
    <Stream
      controls
      src={signedToken}
      poster="https://example.com/custom-thumbnail.jpg"
      preload="metadata"
      onError={(e) => {
        console.error('Authentication or loading error:', e);
      }}
    />
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.