Nothing is more frustrating to the internet marketer than video encoding. Okay, learning php/html is a bit intimidating, but let me tell you…video encoding is a different animal genre altogether.
If you are creating and producing online web videos and self hosting your videos on amazons3 cloud and using a HTML5 video player like my very own Covert Player or my soon to be released Grid Video Player, then this blog post will help you.
How I Encode Videos for HTML5:
- Step 1: Create a MP4 video – Create your video using your Camera or Screencast software (I use Camtasia 8). If your camera produces a AVCHD file, you can convert it to a MP4 for free using my AVCHD Converter.
- Step 2: Import your created video into Camtasia 8 for editing, and then choose HTML5 MP4 production, which will produce for you a nice html5 ready mp4 file.
- Step 3: Convert MP4 to Webm – Sometimes I use FFMPEG to covert my MP4 to Webm format for more control, but recently, I have been using XMedia Recode to produce my WEBM video fileS. I simply import my MP4 into XMedia, configure, and Encode. It is the best and very simple to use. Watch my video tutorials below for instructions.
- Step 4: I upload both my MP4 and WEBM video files to my AmazonS3 bucket, and making sure my Content-Type tag value is video/webm and video/mp4. Once again, watch my videos below. Once this is done, my video file is online. I can now take the mp4 and webm video files and enter them into my video players settings. I don’t bother with OGG. I only use mp4 and webm format.
- Note: For Covert Player or Grid Video Player customers, make sure your ‘Enable Preload’ is disabled for best viewing in Chrome. Use a splash image instead of preload instead.
Watch these video tutorials on my 4 steps:
FFMPEG Command: Enter this at C Prompt (see video)
(1) Video Conversion from MP4 to WEBM
ffmpeg -y -i inputvideo.mp4 -filter:v scale=640:360,setsar=1/1 -pix_fmt yuv420p -b:v 500k -r:v 25/1 -force_fps -c:a libvorbis -b:a 80k -pass 2 outputvideo.webm
(2) Snapshot Thumbnail
-ss 00:00:05.000 -f image2 -s 640×360 -vframes 1 splash.png
HTML5 Video is where you need to be, now and in the future. Google endorses it, and even creates the webm open source for it. Mobile devices love html5 video. I can go on and on. You do you need to download the Adobe Flash browser extension to watch a video if the video player is html5.
- Flash is not supported on Apple devices: iPad and iPhone is moving away from Linux and Android
- Developers are moving away from Flash. Google Trends downward slope means that Flash is risky
- Flash is heavy in resources. It is heavy on your CPU and consumes a lot of battery.
- Adobe itself is moving aggressively to HTML5 video.
The problem? It is relatively new to still much to learn. I have pulled my hair out trying to learn how to get past the “HTML5: Video File Not Found” message when I go to my browser. Okay, my hair was already out…lol.
After two weeks of testing, I can now say that I am a expert in putting html5 video on the web. Here is what you need to know:
General Video Advice:
Assuming your original video has an 16:9 ratio, you should aim for:
- A resolution of 640×360 pixels plays best on the web (not 1080p)
- An average video bitrate between 500 and 1500 kilobits per second. Be extremely careful about bitrate and dimensions! Watch my first video below with regards to dimentions.
- An average audio bitrate between 40 and 80 kilobits per second
- Encode to a constant frame rate. Do not use Variable frame rate, as it will break playback in various browser and/or platforms.
- Make sure to apply a sample ratio of 1/1 (square pixels) because Internet Explorer and Flash cannot handle anamorphic MP4’s (Google the term).
- .MP4 video file format container uses the H.264 (ie, MPEG-4 AVC) codecs and a AAC audio codecs
- .WEBM video file format container uses the VP8 video codecs and Vorbis audio codecs
- .OGG video file format container uses the Theora video codecs and Vorbis audio codecs
Chrome and Firefox are the most widely used browsers. But for video, they support different file formats. For example, at the time of this post, Chrome supports MP4 video, but is planning on removing MP4 support. Firefox does not support MP4 video right now, but they are planning on adding MP4 support.
Thus, the best solution to play HTML5 videos is provide a MP4 and WebM, which will cover 99% of all browsers out there. Use OGG if you want support for some older browsers. I personally just use MP4 and WEBM.
- WebM video file format plays on the latest Firefox, and Opera
- MP4 video file format plays on Chrome, Internet Explorer, and Safari
- OGG video file format plays on Firefox, Chrome, and Opera
By default, Covert Player attempts to use HTML5 videos, starting with WebM, and if your website visitor’s browser does not support HTML5, then it will default to Flash and the MP4 is used. Covert Player has a lightweight flash player backup.
MIME Type is a meta data tag that simply tells the browser which Content Type is being served. For HTML5, you want to make sure your Content Type is set correctly to these key/values:
- Content-Type video/webm
- Content-Type video/mp4
- Content-Type video/ogg
If you are using AmazonS3, you can make your the changes to your MetaData inside your AmazonS3 console. If you are using Bucket Explorer, this is really easy, and my Video 4 explains exactly how I do this.
This blog post gives you exact steps that I take to make videos for online.
Thank you for reading. Please make a comment, I read them all.