Search code examples
htmllambdavideo-streaming

Can I embed a video data in a webpage and later access the video from the web page?


My question may sound a bit wired but I do have legitimate use.

I am using a Lambda function to process incoming short video files (100-200KB), and package the video using Dash/Hls. The packaging process produces two files: a packaged video file, and a Manifest file contains the URL where to access the packaged video file. Normally, I would store both files into S3 and generate two URLs.

My Lambda function returns an iframe:

<html>
...
<script>
var manifestURL = "the url of the manifest file"
...
</script>
</html>

So the browser will first fetch the manifest file, and then find the URL of the video file from the manifest file, and then fetch the video for playing.

In my case, the video only need to be accessed once. Therefore, I wonder if there is a way to "embed" the complete content of the manifest file and the video file in the iframe so I do not need to interact with S3 storage. Something like:

<html>
...
<script>
var manifestURL = "manifest"
...
</script>

<file-data id="manifest">
...content of the manifest file
...URL of video: "packagedMP4"
</file-data>

<file-data id="packagedMP4">
...base64 encoded video file
</file-data>
</html>

This is somewhat similar to the data URI for image and video, for example, I can include the content of an image using <img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Qd...> so I do not need the image to have a URL.

Note that I can not change the logic of the media player, so both the manifest and the video still need to have a "seemingly" legitimate URL so I can fool the player to load them.


Solution

  • My question may sound a bit wired but I do have legitimate use.

    First off, you should explain the use case... otherwise we just have to guess and make assumptions.

    I am using a Lambda function to process incoming short video files (100-200KB), and package the video using Dash/Hls.

    Why? There's no real benefit to DASH or HLS here. As you've seen, your video ends up being a single segment anyway.

    Skip the DASH/HLS part and just generate your media file.

    My Lambda function returns an iframe

    This appears to be pointless, yeah? Especially since you don't need any code now for HLS or DASH...

    In my case, the video only need to be accessed once. Therefore, I wonder if there is a way to "embed" the complete content of the manifest file and the video file in the iframe

    You actually can use base64 for this in the same way you do for images, but don't. That adds 33% overhead for zero functional benefit.

    What you should do instead is just return the video file from your function. No iframe, no code, no DASH, no HLS, just keep it real simple:

    <video src="https://example.com/your-lambda-url"></video>
    

    The browser will make the GET request. You can handle that in your lambda function and return video data. That's it, that's all there is to it!

    I recommend you include appropriate caching headers, and also ignore any requests for ranges (Accept-Ranges: none in your response too).