Join Jan Ozer for an in-depth discussion in this video Producing for HTML5, part of Up and Running with Adobe Media Encoder.
- View Offline
In this tutorial, you'll learn to produce an H.264 file for HTML5 playback. We'll start with a quick overview of HTML5 specific playback requirements, and then jump to the Adobe Media Encoder and coding controls. If you're producing a H.264 file for HTML5 playback, you want to use the MP4 container format. In terms of profiles and levels, there are no restrictions in any of the H.264 compatible HTML5 browsers. In terms of the file we're going to produce in a Adobe Media Encoder, we're going to code to a resolution of 640 by 360, a frame rate of 30 frames per second, video data rate of 800 kilobits per second.
And an audio configuration of 64 kilobits per second mono. And let's import a Premiere Pro sequence for this encode. So, I'll click File > Add Premiere Pro Sequence, and project files, Watley is the project. It's going to load the only sequence that's available. Click the Sequence, click OK, and it loads in. We're going to be working in the H.264 format. Let me click this to bring up the Export Settings dialog.
Now, I want to start with the preset that's closest to what I'll be producing here, and probably want to start with the YouTube widescreen SD. And that gives us the 640 by 360 resolution we want, 30 frames per second. We want a progressive file, fixed aspect ratio, is fine at square. We want to use the high profile, level is fine, don't want the renderer at maximum depth because it doesn't add any value. And we're going to use two pass DBR.
And Adobe Media Encoder expresses target bit rates in the megabits per second, we want 800 kilobits, so I'll type in 0.8, that's 800 kilobits. And I will double that for the maximum, type in 1.6. In terms of key frame distance, I'll click Set Key Frame Distance and I like 300, which gives us a 10 second key frame interval. I'm not going to use maximum render quality since I'm encoding a sequence, I will use the previews that will speed the encoding.
I'm not changing the frame rates so I won't use Frame Blending. On the audio side, AAC, I want to use mono, 44 is fine, high is fine. 64 kilobits per second is also fine. I want to prioritize bit rate in this case because I want the 64 kilobits. I don't want to prioritize frequency, and adjust the bit rate to maintain the frequency that's set. So, I'll click Bit Rate to make sure that you achieve the targeted bit rate. We're not sending this via FTP, but if we were, I'd like the FTP tab, click the FTP check box, insert the credentials and then press Test to to test the connection.
On the left hand side of the Export Setting style log, we've already flipped that back and forth here. There is no issue. I don't want to trim the file before I send it, I want to send the entire file and I want to save this preset, which I'm going to call 8264_HTML5. And if you've downloaded the project files, this should be in your Presets folder. And let's call this Watley_HTML5, and then we'll click Save, and that changed the output full name, and everything looks clean and green.
I'll click OK. And I would click To start Q to start the encoding. And that's all you need to know to produce an H.264 file for HTML5 deployment with the Adobe Media Encoder.
- Overview of the encoding workflow
- Setting preferences
- Creating, importing, and working with custom presets
- Streaming basics and best practices
- Producing H.264 for Flash, Silverlight, HTML5, and QuickTime
- Using VP6 and WMV
- Producing for optical disc
- Adaptive streaming