[SalesForce] display video in Lightning Component which is stored in Documents or SF Files

With Static Resources it works fine, but if I'm trying to use Documents and Url like /servlet/servlet.FileDownload?file=0698E0000008w5e as source URL for <source> tag – it prevents me from displaying it because of CSP (but for <img> tag it's okay).
I understand that I can add my org URL to trusted whitelist, but is it the only way how can I display videos from Document and SF Files?

Here is my code template:

     <video muted="true" aura:id="video" class="video" autoplay="autoplay" loop="loop" >
        <source src="/servlet/servlet.FileDownload?file=0698E0000008w5e" type="video/mp4" />
    </video>

Best Answer

If you have video stored in the salesforce files , you can use the lightning:fileCard component to show the preview of the video

<aura:component>
   <lightning:fileCard fileId="069XXXXXXXXXXXX"/>
</aura:component>

The fileId value must be a valid 15 character ContentDocument ID.

On desktops, clicking the file preview opens the SVG file preview player, enabling you to preview images, documents, and other files in the browser. The file preview player provides quick access to file actions, such as upload, delete, download, and share. On mobile devices, clicking the file preview downloads the file. If a title is available, it's displayed below the file preview in the caption area. The file type determines the icon used on the file preview and caption area.

Related Topic