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

# Video Player

A Video player component that can play various video formats.

<img src="https://mintcdn.com/writer/dHnl9w_Om9ycQRLE/framework/public/components/videoplayer.png?fit=max&auto=format&n=dHnl9w_Om9ycQRLE&q=85&s=b7ac2f9091c2198a695401869f95de5d" width="1141" height="668" data-path="framework/public/components/videoplayer.png" />

Use your app's static folder to serve videos directly. For example, `static/my_video.mp4`.

Alternatively, you can pack bytes or files in state:

`state[&quot;vid_b&quot;] = wf.pack_bytes(vid_bytes, &quot;video/mp4&quot;)`

`state[&quot;vid_f&quot;] = wf.pack_file(vid_file, &quot;video/mp4&quot;)`

Afterwards, you can reference the video using the syntax `@{vid_f}`.

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Source</td>
      <td>Text</td>
      <td>The URL of the video file. Alternatively, you can pass a file via state.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable controls</td>
      <td>Boolean</td>
      <td>Display Video player controls.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Autoplay</td>
      <td>Boolean</td>
      <td>Autoplay the video when the component is loaded.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Loop</td>
      <td>Boolean</td>
      <td>Loop the video when it reaches the end.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Muted</td>
      <td>Boolean</td>
      <td>Mute the video by default.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>