html5 视频标签 - 加载/播放视频的延迟答案

【问题标题】：html5 video tag - delay in loading/playing videohtml5 视频标签 - 加载/播放视频的延迟
【发布时间】：2014-01-08 21:36:57
【问题描述】：

谁能解释一下为什么在使用 html5 视频标签自动播放存储在 Amazon S3 上的相同视频（约 1 分钟/5MB 文件）时会出现明显延迟？

这是演示延迟的代码（您需要等待大约 20 秒才能开始第二个视频）：

<!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>

使用上面的代码，在第一个视频上点击暂停按钮将导致第二个视频立即开始播放。

另一方面，如果视频文件不同（但也是 1 分钟/大约 5MB 的文件），则加载的视频都会立即开始播放：

<!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>

就像另一个数据点一样，如果我加载两个较小的相同视频（约 15 秒，1.5MB 文件），它们也会立即开始播放：

<!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>

有人可以解释一下同时加载两个相同的长视频时延迟的原因以及如何让它们立即开始？（也许每个视频播放一秒钟，然后暂停以导致后续视频加载？？？）

【问题讨论】：

标签： html video amazon-s3

【解决方案1】：

由于您已经在使用 S3，因此请务必使用云端 RTMP 分发。你可以找到更多详情here

【讨论】：

谢谢，维尔。我实际上决定在 Amazon S3 上复制单独的存储桶。我知道这是一个 hack，但到目前为止，我什至还没有接近我的容量限制，所以这是一个免费的解决方案，尽管是暂时的。