How to play video files in LWC using content asset file

In this post we will see how to play a video using content asset file in LWC.

I have added one video to content asset file.In lwc by importing the contentAssetUrl , we can access the content asset file.

 

VideoPlayer.html

<template>

<video width="60%" height="50%" controls="controls">

<source src={waterfallVideoUrl} type="video/mp4" />

</video>

</template>

VideoPlayer.js

import { LightningElement } from 'lwc';

import waterFallContentAsset from '@salesforce/contentAssetUrl/waterfall';

export default class VideoPlayer extends LightningElement {

waterfallVideoUrl = waterFallContentAsset;

}

VideoPlayer.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>48.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target>

<target>lightning__Tab</target>

</targets>

</LightningComponentBundle>

GitHub :

https://github.com/rcsaravananmkd/Saravanan/tree/master/LWC/videoPlayer

Result :