CODEWITHSUNDEEP
htmlvideoamazon-s3
Vee
Vee

Reputation: 1841

html5 video tag - delay in loading/playing video

Can somebody please explain why there is a significant delay when using the html5 video tag to autoplay identical videos (~1 min/5MB files) that are stored on Amazon S3?

Here's the code that demonstrates the delay (you'll need to wait about 20 seconds for the second video to start):

<!DOCTYPE html>
<html>
  <body>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/long_video_1.MOV"></video>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/long_video_1.MOV"></video>
  </body>   
</html>

With the code above, hitting the pause button on the first video will cause the second video to start playing immediately.

On the other hand, if the video files are different (but also 1 min/about 5MB files), both load videos start playing immediately:

<!DOCTYPE html>
<html>
  <body>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/long_video_1.MOV"></video>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/long_video_2.MOV"></video>
  </body>   
</html>

Just as another data point, if I load two smaller, identical video (~15 seconds, 1.5MB files), both also start playing immediately:

<!DOCTYPE html>
<html>
  <body>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/short_video_1.MOV"></video>
    <video autoplay="true" controls="true" src="https://s3-us-west-2.amazonaws.com/testbucket666/short_video_1.MOV"></video>
  </body>   
</html>

Can somebody please explain the cause for delay when two identical long videos are loaded at once and how I can get them to start immediately? (maybe play each video for a second before pausing it to cause subsequent videos to load???)

Upvotes: 2

Views: 3224

Answers (1)

Veer
Veer

Reputation: 371

As you are already using S3, do use cloudfront RTMP distributoion with that. You can find more details here

Upvotes: 2

Related Questions