> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/video-player.md).
# Video Player
`avonni-video-player`
Plays a video from a given source, with standard playback controls.
## Overview
**Video Player** is a Lightning Web Component that embeds and plays a video from a URL or a Salesforce Content Document, with controls for playback rate, volume, looping, and autoplay.
Use it in your own Lightning Web Components to present training clips, product demos, or any video content. You point it at a source and configure the playback behavior through attributes.
### Use Cases
* **Training content:** Embed onboarding or how-to videos in a guide.
* **Product demos:** Show a feature walkthrough on a record or home page.
* **Marketing media:** Display promotional clips inside a custom experience.
* **Content Document playback:** Play a video stored as a Salesforce file.
* **Looping backgrounds:** Loop a short clip for ambient or hero displays.
***
## Use Case Examples
### Example 1: Embedded demo video
**Scenario:** Show a product demo with a custom volume and a looping playback.
```html
```
```js
// productDemo.js
import { LightningElement } from 'lwc';
export default class ProductDemo extends LightningElement {
title = 'Product Demo';
source = '/resource/demoVideo';
handleDurationChange(event) {
const seconds = event.detail.value;
}
handleError(event) {
const message = event.detail.message;
}
}
```
**Result:** A titled video player at 60% volume that loops, reporting its duration via `durationchange` and surfacing playback errors via `error`.
### Example 2: Autoplaying looped background clip
**Scenario:** Play a short, muted clip on loop for an ambient hero section.
```html
```
```js
// heroClip.js
import { LightningElement } from 'lwc';
export default class HeroClip extends LightningElement {
source = '/resource/heroClip';
}
```
**Result:** A controls-free video that autoplays silently and loops, suitable for a background or hero display.
***
## Specifications
### Attributes
| Name | Description | Type | Default | Required |
| --------------- | --------------------------------------------------------------------- | ------- | ------- | -------- |
| `autoplay` | If present, the video will automatically start to play when it loads. | Boolean | `false` | |
| `hide-controls` | If present, the video controls are hidden. | Boolean | `false` | |
| `loop` | If present, the video will loop continuously. | Boolean | `false` | |
| `playback-rate` | Playback rate of the video. It has to be a number between 0.1 and 16. | Number | `1` | |
| `source` | Source of the video. It can be a URL or a Content Document ID. | String | — | Yes |
| `title` | Title of the video player. | String | — | |
| `volume` | Volume of the video. It has to be a number between 0 and 100. | Number | `100` | |
### Methods
| Name | Description | Argument Name | Argument Type | Argument Description |
| ---------------- | ---------------------------------------------------------- | ------------- | ------------- | -------------------- |
| `getCurrentTime` | Get the current current playback time of the audio player. | | | |
### Custom Events
#### `durationchange`
The event fired when the duration of the video changes.
The `durationchange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------------------- |
| `value` | number | Duration of the video in seconds. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `error`
The event fired when an error occurs in the video player.
The `error` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------- |
| `message` | string | Message of the error. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
## Key Considerations
* **Source required:** `source` accepts a URL or a Content Document ID; an invalid source triggers the `error` event.
* **Playback bounds:** `playback-rate` must be between 0.1 and 16; `volume` between 0 and 100.
* **Autoplay policies:** Browsers often block audible autoplay—use a 0 `volume` with `autoplay`.
* **Hidden controls:** With `hide-controls`, drive playback programmatically or via `autoplay`/`loop`.
* **Best Practice:** Always provide a valid `source`. Avoid combining `autoplay` with audible playback—pair it with a muted/low `volume` and `loop` for background clips to respect user experience.
***
## Troubleshooting Common Issues
* **Video won't load:** Verify `source` is a reachable URL or a valid Content Document ID; check the `error` event message.
* **Autoplay not working:** Browsers block audible autoplay—set `volume="0"` alongside `autoplay`.
* **Playback rate ignored:** Ensure `playback-rate` is within the 0.1–16 range.
* **If issues persist:** Contact our support team at for assistance.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/lwc-components/core-components/video-player.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.