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

Possible to stream videos using Amazon S3/CloudFront with HTML5 player?

提问by at.

I want to use an HTML5 video player and stream videos. Is this possible with S3/CloudFront? I understand Amazon uses the RTMP streaming protocol and HTML5's videotag does not support RTMP. Is there any way to stream videos with HTML5 players?

我想使用 HTML5 视频播放器并流式传输视频。S3/CloudFront 可以做到这一点吗？我了解亚马逊使用 RTMP 流媒体协议，而 HTML5 的video标签不支持 RTMP。有没有办法用 HTML5 播放器流式传输视频？

回答by gview

Much of what @Wayne Koorts posted provides the basis for a good answer. The disconnect it seems is that you can "stream" video via progressive download. This works with any html5 compatible video file, as he illustrated.

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

In order to get the best performance in a progressive download of mp4 files, you need the moov atom meta data to appear at the beginning of the file. Insuring that your mp4 files have this property is one of the reasons that the qtfaststart program is included with ffmpeg.

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

Of course, progressive download is not a "streaming media server". Streaming media servers were designed to support a number of different features including:

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

• Security and DRM
• Adaptive streaming/interleaving (support for multiple bit rates interleaved into a specific file)
• Seeking

• 安全和 DRM
• 自适应流/交织（支持将多个比特率交织到特定文件中）
• 寻求

It seems the particular concern expressed here is the seeking feature. As it happens this is supported fine in html5 and by s3/cloudfront.

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

What is confusing is that cloudfront of video files has several options. One option is to have the files delivered by their network of licensed Adobe FMS servers. This is where the confusion about the use of RTMP comes into play. However, that is only an option. Files can be distributed to cloudfront in standard "download" form and they will have the seeking property due to the implementation of byte ranges and support for what is popularly known as pseudo streaming.

令人困惑的是，视频文件的云端有多种选择。一种选择是让文件由其许可的 Adob​​e FMS 服务器网络交付。这就是关于使用 RTMP 的混淆发挥作用的地方。然而，这只是一种选择。文件可以以标准的“下载”形式分发到 cloudfront，由于字节范围的实现和对众所周知的伪流的支持，它们将具有搜索属性。

There seems to be a lot of confusion about the term "Pseudo streaming" but in the case of html5, it's simply the requirement that the HTTP server supports the 1.1 specification. When seeking, the client sends a byte range request and the server is responsible for delivering that portion of the file.

关于“伪流”这个术语似乎有很多混淆，但在 html5 的情况下，它只是要求 HTTP 服务器支持 1.1 规范。查找时，客户端发送字节范围请求，服务器负责交付文件的该部分。

In other words... seeking with the html5 player does work with the cloudfront servers because they are HTTP 1.1 compatible.

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

As for some of the other functions that streaming servers provide, there are a variety of competitive servers that have implemented "H264 streaming" or elements of MPEG-DASH as an alternative to the use of RTMP and FMS compatible servers. A number of flash based players support these functions, which go above and beyond simple seeking. The JWPlayer and Flowplayer are 2 examples of players that support some or all of the features, however HTML5's video player has no support for any of these features. You can learn more looking at http://h264.code-shop.com/trac#H264StreamingModuleIntroductionversion2

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

If that's not enough confusion for you, Apple implemented their own "HTTP Live Streaming" protocol, sometimes known as m3u8, which they support in ios and quicktime. I mention this because frequently people want a way to support a variety of different devices.

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

I hope this helped clarify things a bit.

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

回答by Wayne Koorts

Something I have done successfully recently is to use the Video.js HTML5 player(open source) video player, with videos hosted on S3. Basically you just upload your video into your S3 bucket, then the code on the page looks something like this (after including the Video.js CSS and JS files into your page):

我最近成功完成的一件事是使用Video.js HTML5 播放器（开源）视频播放器，将视频托管在 S3 上。基本上，您只需将视频上传到 S3 存储桶中，然后页面上的代码如下所示（在将 Video.js CSS 和 JS 文件包含到您的页面后）：

<video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="1600" height="900"
    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>

posteris just the still image to display on the video player while the video is loading or not playing. As for the <source>tags, you can link as many or as few of these as you have videos for. More formats just means better support across different platforms (e.g. some vanilla Linux distributions may not play MP4 etc.).

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

See the Video.js quick start guide here.

请参阅此处的 Video.js 快速入门指南。

When deciding whether to use S3 or CloudFront: IMHO S3 is more appropriate for video in general because the cost is cheaper when you're storing a lot of data (because CloudFront distributes copies of everything to all of its edge servers, although you can limit that somewhat via options). Some people do prefer CloudFront though due to the speed, although remember CloudFront is intended primarily as a content delivery network where super fast response times are required (e.g. for site graphics, stylesheets, JS files etc.), so it's a trade-off depending on your needs. If your videos are all very small then you may find CloudFront actually is appropriate for your needs.

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

For analysing costs more definitively you can use Amazon's monthly cost calculator.

为了更明确地分析成本，您可以使用亚马逊的每月成本计算器。

回答by Ryan Hell

I am working on some video stuff for a global production. I need to keep cost down but I am looking to be easily scalable and enough features to deliver a pretty complex system securely. AWS seems great, been using them for a few years now and I think the S3 Buckets are amazing. They are free, to a limit. And yes. They certainly do succeed in providing what I believe is streaming video; in that it is housed in S3 and it plays right into my JWPlayer immediately on page load with no jitters or latency.

我正在为全球制作制作一些视频内容。我需要降低成本，但我希望能够轻松扩展并提供足够的功能来安全地交付非常复杂的系统。AWS 看起来很棒，已经使用它们几年了，我认为 S3 Buckets 很棒。他们是免费的，有限制。是的。他们在提供我认为是流媒体视频方面确实取得了成功；因为它位于 S3 中，并且在页面加载时立即播放到我的 JWPlayer 中，没有抖动或延迟。

I can see some of the streaming video delineations are vague and still confusing for me, although @gview did a great job providing us with deeper incite. The complexity of it interest me, but if your agenda is to get that video going, I do not believe HTML5 is your answer. SOAP, REST, HTTP, and even HTTPS are supported and provision-able as far as I know. The documentation at AWS is noteworthy also, very helpful. I will attach a start link here.

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

@ user2352370 : JWplayer..I am undecided. I just purchased the middle tier membership and now upon reading Wayne Koorts above, I think JSvideo is better for a variety of reasons and I will be working with that if I can get a refund. I am not seeing any immediate value in JWvideo, past the styling it provides for the videos. I believe the JWvideo's value to me at least, is limited to the styling of the video. I can use JSVideo to create a variety of fall-backs easily for multiple device and browser types. I can style the JSVideo even, but maybe something is to be said for the simplicity of JWvideo. I am probably going to need it for the onslaught of video post I will have in the months ahead.

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

Both JWVideo & JSVideo Will Work
I think JWVideo and JSvideo both will do the job, I currently have both on my site for various videos and both do a decent job, have not tested browsers very deep yet though.

JWVideo 和 JSVideo 都可以工作我认为 JWVideo 和 JSvideo 都可以胜任，我目前在我的网站上都有各种视频，而且都做得不错，但还没有对浏览器进行非常深入的测试。

Docreate a Free AWS account and play with the services for free. Its pretty eye opening if you have been dealing with providers like RackSpace or Host Gator for a while.
AWS Free Tier HomePage

请创建一个免费的 AWS 帐户并免费使用这些服务。如果您已经与 RackSpace 或 Host Gator 等供应商打交道了一段时间，它会让您大开眼界。
AWS 免费套餐主页

AWS Documentation Site for S3

S3 的 AWS 文档站点

回答by Kevin Monk

Was looking at AS3 for hosting videos with VideoJS for my own site and that's why I found your question but when I looked at the example code for VideoJS I noticed that the link was at a company called ZenCoder - http://video-js.zencoder.com/oceans-clip.mp4

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

http://zencoder.com/en/

http://zencoder.com/en/

I have no association with Zencoder but presumably worth considering if you're looking for cloud based video hosting.

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

回答by Ravi Jayagopal

AWS no longer supports RTMP or Flash. So use Apple's HLS - HTTP Live Streaming.

AWS 不再支持 RTMP 或 Flash。所以使用 Apple 的 HLS - HTTP Live Streaming。

You will need to use the following stack:

您将需要使用以下堆栈：

S3 to store the videos, CloudFront, MediaConvert to convert your single .mp4 into a streaming files (a .m3u8 index file & .ts segment files).

S3 存储视频，CloudFront，MediaConvert 将您的单个 .mp4 转换为流文件（.m3u8 索引文件和 .ts 段文件）。

Doing all of this manually, and each time for each video, is going to be quite an intensive and time-consuming experience, even for those technically inclined. If you have a WordPress website, then you could use a plugin like https://S3MediaVault.comwhich can handle all of this.

手动完成所有这些工作，并且每次为每个视频完成，即使对于那些有技术倾向的人来说，也将是一种非常密集和耗时的体验。如果您有一个 WordPress 网站，那么您可以使用像https://S3MediaVault.com这样的插件来处理所有这些。

回答by user2352370

I have CloudFront & S3 setup & streaming video with an HTML5 player that is responsive. Mind you I am attempting to get it to work in all browsers & it doesn't work 100% how it should.

我有 CloudFront 和 S3 设置和流媒体视频，带有响应的 HTML5 播放器。请注意，我试图让它在所有浏览器中都能正常工作，但它并不能 100% 正常工作。

Here is an interesting tutorial for Embedding video into a WordPress site via JW Player & S3: http://www.mywpexpert.com/embed-videos-amazon-s3-jw-player/

这是通过 JW Player 和 S3 将视频嵌入 WordPress 网站的有趣教程：http: //www.mywpexpert.com/embed-videos-amazon-s3-jw-player/

Here is another example of connecting directly to S3 within WordPress: http://html5.svnlabs.com/amazon-s3-cloud-html5-player/

这是在 WordPress 中直接连接到 S3 的另一个示例：http: //html5.svnlabs.com/amazon-s3-cloud-html5-player/

Hope these help.

希望这些有帮助。