Display Video(Static Resource) In a Lightning Web Component

Telegram logo Join our Telegram Channel
Hello Salesforce!!!

To be able to use the video in LWC, you need to upload the video in the static resource.
Then you can import the same using standard LWC 'Salesforce' module.

Here is the import statement
import myResource from '@salesforce/resourceUrl/resourceApiName';
Where `myResource` is the name that you want to give and refer in js controller
resourceApiName is the API name of the static resource.

Here is my sample component which is displaying video in LWC.

import { LightningElement } from 'lwc';
import VIDEOSAMPLE from '@salesforce/resourceUrl/videoSample'
export default class VIdeoPlayer extends LightningElement {

    sampleUrl = VIDEOSAMPLE;


    <video width="400" controls>
        <source src={sampleUrl} type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.

Similarly, you can put images, audio, documents on LWC.
You need to use the respective tag for each of the file types.

I hope it helped you!

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com