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.

<!-- productDemo.html -->
<template>
    <avonni-video-player
        title={title}
        source={source}
        playback-rate="1"
        volume="60"
        loop
        ondurationchange={handleDurationChange}
        onerror={handleError}
    ></avonni-video-player>
</template>

// 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.

<!-- heroClip.html -->
<template>
    <avonni-video-player
        source={source}
        autoplay
        loop
        hide-controls
        volume="0"
    ></avonni-video-player>
</template>

// 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 playback time of the video 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.

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 [email protected] for assistance.