> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/videojs/v10/llms.txt
> Use this file to discover all available pages before exploring further.

# source

> Media source state and actions for the player store

Tracks the current media source URL and readiness.

## Import

```ts theme={null}
import { source, selectSource } from '@videojs/react';
// or
import { source, selectSource } from '@videojs/html';
```

## Usage

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import { createPlayer, source } from '@videojs/react';

    const Player = createPlayer({
      features: [source],
    });
    ```
  </Tab>

  <Tab title="HTML">
    ```ts theme={null}
    import { createPlayer, source } from '@videojs/html';

    const { ProviderMixin, PlayerController, context } = createPlayer({
      features: [source],
    });
    ```
  </Tab>
</Tabs>

## State

<ResponseField name="source" type="string | null">
  The current media source URL, or `null` if no source has been loaded.
</ResponseField>

<ResponseField name="canPlay" type="boolean">
  Whether enough data has been loaded to begin playback.
</ResponseField>

## Actions

<ResponseField name="loadSource(src)" type="(src: string) => void">
  Load a new media source by URL.
</ResponseField>

## Selector

Use `selectSource` to subscribe to only the source slice of state. Returns `undefined` if the source feature is not configured.

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import { selectSource, usePlayer } from '@videojs/react';

    function SourceInfo() {
      const source = usePlayer(selectSource);
      if (!source) return null;

      return <span>{source.source ?? 'No source'}</span>;
    }
    ```
  </Tab>

  <Tab title="HTML">
    ```ts theme={null}
    import { createPlayer, MediaElement, selectSource } from '@videojs/html';
    import { videoFeatures } from '@videojs/html/video';

    const { PlayerController, context } = createPlayer({ features: videoFeatures });

    class SourceInfo extends MediaElement {
      readonly #source = new PlayerController(this, context, selectSource);
    }
    ```
  </Tab>
</Tabs>