how do I generate HTML5 files from After Effects CC?

[richardELeach]

Hi

Forgive my n00b question, but I've built a small video in After Effects that I need to import into Adobe Edge Animate. Edge says it will take .ogg files, so how do I convert an After Effects project to output usable footage available to HTML5 sources?

Thanks again,

Rich

[Rick Gerard]

After Effects makes video. You can embed H.264 video in HTML 5 projects but the animations AE do not translate anything else. AE does not, and probably will never will export an edge animate file.

[richardELeach]

Thanks for your reply Rick.

Do you happen to know how I would generate a .ogv file in my After Effects workflow? I understand Adobe Edge wants that specific file type and I'm not trying to import an After Effects native file into Edge Animate, I just don't know to generate the HTML5 file types from AE.

Thanks again,

Rich

[Rick Gerard]

It's like I said before, you can't. After Effects makes video. That's all it does.

[richardELeach]

Hi Rick

...maybe I'm not asking the right question. When I finish building an animation in After Effects I add it to the Render Queue and from there I can specify file format, properties, etc. Do you know how to create a .ogv (or any other HTML5 compatible video file) from the Render Queue inside of After Effects? I also have the Adobe Media Encoder so I can use that if that's how you guys in the industry typically do it.

Thanks again for your help,

Rich

[Rick Gerard]

You want to render H.264 using one of the Web presets with the Adobe Media Encoder. You do not want to use the Render Cue. This will give you an MP4 file which you can play using the HTML5 video player.

I would suggest that you read up on HTML5 and video compression.

[richardELeach]

Rick

I've been successful exporting to a .mp4 file type which has been working nicely but Firefox (maybe other browsers?) need a HTML5 specific type, so I found this site:

Convert video to OGG Theora online

... which accepts my .mp4 file and immediately returns a .ogv file. Adobe Edge Animate actually encourages using multiple file types so I use the .mp4 AND the .ogv files.

So I worked out the issue.

If anyone else finds a filter/plugin/etc. that will let Adobe Media Encoder export .ogv files please let me know.

Thanks,

Rich

[Rick Gerard]

The MP4 is universally accepted by mobile devices and web browsers. I would not even bother with the other type. I've been doing websites and video for for as many years as you could do website with video.  The very best way to serve a video is through a video server, not placing it directly on your website server. 10 visitors simultaneously viewing a 720 P video streaming from your Web server can cause you all kinds of grief. A thousand people viewing a video embedded but served up from Vimeo or YouTube will cause you no problems.

Unless there's a very compelling reason for you to host your own video I would strongly suggest using a dedicated video server and an MP4.

One last point. I know of no one that is developing plug-ins for the Adobe media encoder.

[richardELeach]

Hi Rick

Thanks again for your responses, I value your take on this issue.

Sadly, the .mp4 video is not playing in the Firefox browser, hence my need to include the .ogv file - as that WILL play. These video clips that I'm building are actually pretty small but they're incorporated into Adobe Edge Animate presentations.

So without a HTML5 compatible video format as an alternative the Edge Animate presos simply won't run.

So, I'm still searching for an Adobe-esque workflow solution to generating a .ogv file.

Thanks again,

Rich

[richardELeach · Accepted solution]

Rick (and anyone else working through this issue):

I received this info when I posted this same question on the Edge Animate forums, I hope it helps 🙂

Hi Rich,

Unfortunately, Adobe Media Encoder doesn't have native support for ogg/theora or ogg/vorbis. However, you can install a (currently beta) plug-in on your system which will enable ogg encoding in AME:

fnordware/AdobeOgg · GitHub

Or, if you'd rather, you can also install the Firefox extension Firefogg, and encode to ogv directly from Firefox:

Firefogg - video and audio encoding for Firefox

I've had excellent results using both of the above methods.