可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

Posted

技术标签:

【中文标题】可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?【英文标题】:Possible to stream videos using Amazon S3/CloudFront with HTML5 player? 【发布时间】:2013-04-22 22:47:20 【问题描述】:

我想使用 html5 视频播放器和流式传输视频。这对 S3/CloudFront 可行吗?我了解亚马逊使用 RTMP 流媒体协议,而 HTML5 的 video 标签不支持 RTMP。有没有办法用 HTML5 播放器播放视频?

【问题讨论】:

【参考方案1】:

@Wayne Koorts 发布的大部分内容都为一个好的答案提供了基础。似乎断开连接的是您可以通过渐进式下载“流式传输”视频。如他所示,这适用于任何与 html5 兼容的视频文件。

为了在 mp4 文件的渐进式下载中获得最佳性能,您需要 moov atom 元数据出现在文件的开头。确保您的 mp4 文件具有此属性是 qtfaststart 程序包含在 ffmpeg 中的原因之一。

当然,渐进式下载不是“流媒体服务器”。流媒体服务器旨在支持多种不同的功能,包括:

安全和 DRM 自适应流式传输/交织(支持将多个比特率交织到特定文件中) 寻求

这里表达的特别关注似乎是搜索功能。碰巧这在 html5 和 s3/cloudfront 中得到了很好的支持。

令人困惑的是,视频文件的云端有几个选项。一种选择是通过他们的许可 Adob​​e FMS 服务器网络交付文件。这就是关于使用 RTMP 的困惑发挥作用的地方。然而,这只是一种选择。文件可以以标准的“下载”形式分发到云端,并且由于字节范围的实现和对所谓的伪流的支持,它们将具有搜索属性。

似乎对“伪流”一词有很多混淆,但在 html5 的情况下,它只是要求 HTTP 服务器支持 1.1 规范。查找时,客户端发送一个字节范围请求,服务器负责传递该部分文件。

换句话说...使用 html5 播放器进行搜索确实适用于云端服务器,因为它们与 HTTP 1.1 兼容。

至于流媒体服务器提供的其他一些功能,有多种竞争服务器已经实现了“H264 流媒体”或 MPEG-DASH 元素,以替代使用 RTMP 和 FMS 兼容服务器。许多基于 Flash 的播放器支持这些功能,这些功能超出了简单的搜索范围。 JWPlayer 和 Flowplayer 是支持部分或全部功能的两个播放器示例,但是 HTML5 的视频播放器不支持任何这些功能。您可以通过http://h264.code-shop.com/trac#H264StreamingModuleIntroductionversion2了解更多信息

如果这对您来说还不够混乱,Apple 实现了他们自己的“HTTP Live Streaming”协议,有时称为 m3u8,他们在 ios 和 quicktime 中支持该协议。我提到这一点是因为人们经常想要一种支持各种不同设备的方法。

我希望这有助于澄清一些事情。

【讨论】:

太完美了,谢谢!【参考方案2】:

我最近成功做的事情是使用Video.js HTML5 player(开源)视频播放器,视频托管在 S3 上。基本上你只需将你的视频上传到你的 S3 存储桶,然后页面上的代码看起来像这样(在你的页面中包含 Video.js CSS 和 JS 文件之后):

<video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto"  
    poster="http://mys3bucket.s3.amazonaws.com/videoImage.jpg"
    data-setup='"example_option":true'>
    <source src="http://mys3bucket.s3.amazonaws.com/myvideofile.mp4" type='video/mp4' />
    <source src="http://mys3bucket.s3.amazonaws.com/myvideofile.webm" type='video/webm' />
</video>

poster 只是在视频加载或不播放时在视频播放器上显示的静止图像。至于&lt;source&gt; 标签,您可以链接尽可能多或尽可能少的视频。更多格式意味着对不同平台的更好支持(例如,一些 vanilla Linux 发行版可能无法播放 MP4 等)。

请参阅 Video.js 快速入门指南here。

在决定是使用 S3 还是 CloudFront 时:恕我直言,S3 通常更适合视频,因为当您存储大量数据时成本会更便宜(因为 CloudFront 会将所有内容的副本分发到其所有边缘服务器,尽管你可以通过选项来限制它)。有些人确实更喜欢 CloudFront,尽管因为速度快,但请记住 CloudFront 主要用作需要超快速响应时间的内容交付网络(例如,用于站点图形、样式表、JS 文件等),因此它是一个权衡取舍,具体取决于根据您的需要。如果您的视频都非常小,那么您可能会发现 CloudFront 实际上适合您的需求。

要更明确地分析成本,您可以使用亚马逊的monthly cost calculator。

【讨论】:

但从 S3 开始,您将无法流式传输视频,视频将先下载然后播放。 如何仅通过视频播放器流式传输文件?你不需要一个媒体流服务器来从 S3 中提取文件并将其作为 rtmp 或 http 流流式传输到视频播放器吗? 所以你的意思是没有使用媒体流服务器? 我不是在拖钓,但我还是不明白流媒体服务器的使用,我们只能使用渐进式下载。如果人们只能进行渐进式下载,为什么还要使用带有 S3 和 cloudfront 的 Wowza 或 FMS? @WayneKoorts 这个问题是合理的:如果简单的下载就足以进行流式传输,那么流媒体服务器的用途是什么?我相信不同之处在于您无法从中间加载视频,您必须等待前 50% 已加载,而使用适当的流服务器您将能够从 50% 位置加载而不加载开头的视频。 PS:没有人关心您的代表,我也没有在这里看到任何拖钓,而只是对您的解决方案非常合理的担忧。您应该在 jsFiddle 上发布一个工作演示,以便我们可以尝试从中间加载视频!【参考方案3】:

我正在为全球制作制作一些视频素材。我需要降低成本,但我希望能够轻松扩展并拥有足够的功能来安全地交付相当复杂的系统。 AWS 看起来很棒,已经使用它们几年了,我认为 S3 存储桶很棒。它们在一定程度上是免费的。是的。他们确实成功地提供了我认为的流媒体视频。因为它位于 S3 中,并且在页面加载时立即播放到我的 JWPlayer 中,没有抖动或延迟。

尽管@gview 为我们提供了更深层次的煽动性,但我可以看到一些流媒体视频的描述是模糊的并且仍然让我感到困惑。我对它的复杂性感兴趣,但如果您的议程是让该视频继续播放,我不相信 HTML5 是您的答案。据我所知,支持和配置 SOAP、REST、HTTP 甚至 HTTPS。 AWS 的文档也值得注意,非常有帮助。我将在此处附上开始链接。

@ user2352370 : JWplayer..我还没有决定。我刚刚购买了中间层会员资格,现在在阅读上面的 Wayne Koorts 之后,我认为 JSvideo 更好,原因有很多,如果我能得到退款,我会继续努力的。除了为视频提供的样式之外,我没有看到 JWvideo 的任何直接价值。我相信至少 JWvideo 对我的价值仅限于视频的样式。我可以使用 JSVideo 为多种设备和浏览器类型轻松创建各种后备。我什至可以设置 JSVideo 的样式,但也许要说 JWvideo 的简单性。我可能需要它来应对未来几个月的视频帖子的冲击。

JWVideo 和 JSVideo 都可以使用 我认为 JWVideo 和 JSvideo 都可以完成这项工作,我目前在我的网站上都有各种视频,而且都做得不错,但还没有对浏览器进行过深入的测试。

创建一个免费的 AWS 账户并免费使用这些服务。如果您已经与 RackSpace 或 Host Gator 等提供商打交道有一段时间了,那真是令人大开眼界。AWS Free Tier HomePage

AWS Documentation Site for S3

【讨论】:

【参考方案4】:

我正在寻找 AS3 来为我自己的网站托管 VideoJS 视频,这就是我发现你的问题的原因,但是当我查看 VideoJS 的示例代码时,我注意到该链接位于一家名为 ZenCoder 的公司 - http://video-js.zencoder.com/oceans-clip.mp4

http://zencoder.com/en/

我与 Zencoder 没有任何关联,但如果您正在寻找基于云的视频托管,大概值得考虑。

【讨论】:

以上是关于可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?的主要内容,如果未能解决你的问题,请参考以下文章

使用 HTML5 播放音频

播放带有 HTML5 后备的 FLV 视频

JW Player 嵌入代码的问题 - 带有 HTML5 后备的 Flash

FireFox 和 html5 视频 - 带有 x 的灰色框

Amazon CloudFront - 使用签名 URL 保护视频

带有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作