function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ManishKSinghManishKSingh 

how to use Html5 video tag in lightning component.

Can anyone tell me, how i use html5 'video' tag in my custom lightning component to play video file ?


Any help will be greatly appreciated.
Best Answer chosen by ManishKSingh
sfdcMonkey.comsfdcMonkey.com
hi Manlshsfdc
its very easy
first upload your video file into static resource and select Cache Control = Public
in lightning component use this tag
  
<video width="400" controls="controls">
       <source src="/resource/videoFile" type="video/mp4"/>
   </video>
for test it download sample video from https://vimeo.com/92403651 (https://vimeo.com/92403651)
upload video as static resource
give file name videoFile (or any you want) after upload it use these tag in your lightning component
i hop it helps you
Please Mark it best answer if it helps you so it make proper solution for other :)

 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Manlshsfdc
its very easy
first upload your video file into static resource and select Cache Control = Public
in lightning component use this tag
  
<video width="400" controls="controls">
       <source src="/resource/videoFile" type="video/mp4"/>
   </video>
for test it download sample video from https://vimeo.com/92403651 (https://vimeo.com/92403651)
upload video as static resource
give file name videoFile (or any you want) after upload it use these tag in your lightning component
i hop it helps you
Please Mark it best answer if it helps you so it make proper solution for other :)

 
This was selected as the best answer
sfdcMonkey.comsfdcMonkey.com
https://teachforce.wordpress.com/2016/10/24/how-to-play-video-file-in-lightning-component/
Manoj ThangavelManoj Thangavel
Hi @sfdcMonkey,

I am trying to use the iPhone camera and take a snap from aura component version 39 since the video tag not supported in the above 39 version.

Am able to stream the camera in the video tag, but the video always starts in full screen.

<video id="video" autoplay playsinline >Browser dont support Videos.</video>

Even though, I have added playsinline attribute in the video element. This tag works from desktop browsers, android phone camera in inline mode video streaming from camera. But, iPhone always launches in the full-screen mode and not able to use it as friendly.

Thanks,
Manoj T