Stream S3 private access Image/video in play frame

Aim:

I have a S3 video url and S3 Image url. The S3 bucket have private access(Not public). I want to stream the S3 media files in a html.

What I tried:

I can access the S3 Image/Video by using "Access Key Id" and "Secret Access Key" with the help of "play-S3" plugin.

https://github.com/Kaliber/play-s3

By using the above plugins I can read the image/video file content.

Code snippet:

controller:

def loadS3File(filename: String) = Action { implicit request =>
        try {
            val bucket = S3("user")
            val result = bucket.get(filename)
            val file = Await.result(result, 60 seconds)
            val BucketFile(name, contentType, content, acl, headers) = file
            Ok.chunked(Enumerator(content)).as(contentType);
        }
        catch {
            case e: Exception =>
                BadRequest("Error: " + e.getMessage)
        }
    }

HTML:

<!DOCTYPE html>
<html>
    <body>
        <img width="240" height="320" src="@routes.Application.loadS3File("user.png")" />
        <video controls="controls" preload controls width="320" height="240" name="Video Name">
            <source src="@routes.Application.loadS3File("user.mov")" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        </video>
    </body>
</html>

What I want:

Now I am facing three issues.

1) It waits for the whole file to read and it displayed after that. How do I play a video or show the image without waiting for whole file to download(Stream while downloading...)

2) Await.result(result, 60 seconds). It throws timeout exception after 60 seconds. I shouldn't set the static time. Because each file has its own size. so it takes time to stream based on its size(bandwidth).

3) The image file has been shown after read the whole content. But the video is not displaying after read the whole content. Note: I added log and checked. The video request is called twice. But I didn't know why :(

Can you please help on this to proceed further.