Display Video(Static Resource) In a Lightning Web Component

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.

videoPlayer.js

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

    sampleUrl = VIDEOSAMPLE;

}

videoPlayer.html

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

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!