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 :



Result :


1 comment: