Polaris URLs for Video not rendering in browser

Hi All,

We have used sling:resourceType="cq/gui/components/authoring/dialog/fileupload" have in our AEM components along with enableNextGenDynamicMedia as “true” to connect to Remote DAM instances. 

Our Polaris URL for video is of the format as below - 

https://delivery-p123456-e98765432.adobeaemcloud.com/adobe/assets/urn:aaid:aem:a64f4a64-0af2-4991-ghg4-68542aae43e4/as/1f605fcd-xyz-Jumpstart.mp4

Directly hitting on browser gives 404 - 
{
"type": "https://aem.api.adobe.io/problems/not_found",
"title": "Not Found",
"status": 404,
"detail": "Item doesn't exist"
}

But if I transform the URL by stripping “/as/1f605fcd-xyz-Jumpstart.mp4” and appending “/play” makes it work on the browser by loading the “Dynamic Media Video Player”.

How we render it in our DOM is FED based on ReactJS takes the URL and renders the DOM as below - 

<div class="video-container">
   <span data-component="BannerVideoModal" data-props="{
      videoUrl: https://delivery-p123456-e7654321.adobeaemcloud.com/adobe/assets/urn:aaid:aem:a64f4a64-0af2-4991-9d62-68542aaef544/as/1f605fcd.mp4,
      videoThumbnailUrl: ,
      videoType: videoEmbedded,
      enableAutoplayMode: false,
      enableUnmuteOption: false,
      enableLoop: false,
      bannerType: videoEmbedded,
      a11VideoText: alt-text
      }">
      <div class="nl-bannerVideoModal " data-testid="video-modal">
         <div class="nl-video">
            <div class="nl-video-player">
               <video poster="" aria-label="Video: alt-text" controlslist="noremoteplayback">
                  <source src="https://delivery-p123456-e7654321.adobeaemcloud.com/adobe/assets/urn:aaid:aem:a64f4a64-0af2-4991-9d62-68542aaef544/as/1f605fcd.mp4" type="video/mp4">
               </video>
            </div>
         </div>
      </div>
   </span>
</div>

Beyond this transformation is there any way to make the video run natively?

​@arunpatidar, ​@SantoshSai, ​@Rohan_Garg, ​@aanchal-sikka   

Thanks,

NK