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

Question

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 video tag does not support RTMP. Is there any way to stream videos with HTML5 players?

Solution 1

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.

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.

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

It seems the particular concern expressed here is the seeking feature. As it happens this is supported fine in html5 and by 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.

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.

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

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

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.

I hope this helped clarify things a bit.

Solution 2

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

poster is 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.).

See the Video.js quick start guide here.

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.

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

Solution 3

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.

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.

@ 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.

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.

Do create 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 Documentation Site for S3

Comments

[rajat]

But from S3 you won't be able to stream the videos, the videos will be downloading first and then playing.

[Wayne Koorts]

@rajat The files are streamed into the video player, there is no additional configuration needed from S3. Doing exactly as I've said here works, I've done exactly this for video streaming within the last few days.

[rajat]

How can the files be streamed by just the video player? won't you need need a media streaming server which will pickup files from S3 and stream it to a video player as rtmp or http stream ?

[Wayne Koorts]

Not at all. Streaming simply displays as much of the file as has "downloaded" so far. Think about if you're downloading a video file onto your computer. While that file is downloading you can still view it in a media player on your computer; it will just play as far as there is data in the file on disk. It's the same principle. You know the buffering progress bar you always see in video players? That is how much of the video file has downloaded to the player (into the browser cache or Flash storage for a Flash video) so far.

[rajat]

So you are saying that there is no use of Media streaming server ?

[Wayne Koorts]

I'm actually genuinely not sure if you are trolling or not now. In case you're not: Just try this for yourself if you don't believe me, although I'm not sure why you'd think someone with 4000+ rep has nothing better to do with their time than post joke answers on someone's question. It is simple to set this up a test to show that this works, so I would urge you to try it.

[rajat]

I am not trolling, but i still don't understand the use of streaming servers we can just use progressive download. And why do people use Wowza or FMS with S3 and cloudfront if they can just do progressive download ?

[Community]

@WayneKoorts The question is legitimate: what is the use of media streaming servers if simple download is enough for streaming? I believe the difference is that you can't load the video from the middle, you'll have to wait that the first 50% has loaded while with proper streaming server you would be able to load from position 50% and not load the beginning of the video. PS: no one cares about your rep, nor did I see any trolling here but only very legitimate concerns about your solution. You should post a working demo on jsFiddle so we can try to load the video from the middle!

[rajat]

That was perfect, Thanks!

[rbansal]

I am doing the same thing as @WayneKoorts suggested. Halves of the videos run perfectly and another half gets a loader. The seek bar appears after half of the video has loaded. I am trying to understand if it's possible to reduce buffering when loading the video directly from s3? The size of the videos ranges from small to a big one and the format is WebM. I have control over the video creation, so I can add some additional metadata at creation time if required.