Tuesday , April 18 2017
Breaking News
Home / Recent Articles / Guide to HTML5 Video Encoding – MP4 to Webm

Guide to HTML5 Video Encoding – MP4 to Webm

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.

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

Codecs:

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

Browser Compatibility:

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 Types

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.

About Mark Dulisse

Software Developer, Blogger, SEO Consultant, Internet Marketer

Check Also

Announcement – Video Analytics Game Changer

After a small fortune in investment in both time and resources, I am pleased to …

19 comments

  1. Awesome awesome awesome!

    Mark, I’ve pulled my hair out over serving video on the web.

    I never could get html5 to work on Chrome.

    I’m going to use your tutorial and figure out what I was doing wrong, or better yet, how to do it right!

    Thanks Boss!

    • Make sure preload is turned off using my covert player. I find that chrome has issues with preload. And check mime type

  2. Wow, thanks for the explanations. I have bookmarked this page as I am sure everytime I do some video I will be wondering about some aspect of what you wrote.
    Scott

  3. Great Detailed Post .. Mark, Thanks.
    Any Advice For Non-Camtasias?
    Thanks,
    Keith.

  4. do you know any free tool that convert flash swf into mp4 ?

  5. Thank you very much for this post, Mark.
    Precise, detailed and fundamental info. You are very generous; I´ve seen many WSOs with
    less information than here being sold for a bunch of bucks… This is awesome.
    Thanks again,

    Carlos

  6. Mark,

    Great tutorial videos. Where is the code for the ffmpeg command line?

    Ray

  7. Hi Mark,

    I’m recording a PPT full screen on my monitor (1920×1080), rendering as 1280×720 MP4 and playing the video using Flowplayer at 850×485. When it plays, the text looks a bit fuzzy in the player, but when I full screen the video, the playback looks a lot more crisp.

    What are your recommendations? I know you said to record at the same resolution as what the player is, but what if I want viewers to have the option to full screen the video? Not understanding why playing in full screen has better quality than the smaller player. Is it possibly my monitor?

    Thanks,
    Jeff

    • The more you downscale, the fuzzier your video will be. Plus, downscaling is a waste of resources. Record the powerpoint presentation in 854×480 which is 16:9 ratio, and perhaps even put it on your website at 640×360. Playing this dimension on the page displays reasonably well in fullscreen too.

  8. Thanks Mark for this great article, I never realised what a nightmare all this is. I was hoping to find an answer to an issue I have with self hosted (S3) mp4 videos running in TPP in that they take forever to load (as much as 10 minutes for an hour long video). Visitors to the site just won’t wait that long. The same video in an iframe loads and plays instantly, and YouTube videos work fine.

    Hoping to find a solution so I can keep using TPP but so far I have drawn a blank.
    Any advice very much appreciated. Mike.

  9. Hey Mark,

    When it comes to this techie stuff, I have to admit I’m not that good. But after reading this post and watching one of the videos, I think that I can do it.

    I have bookmarked the site for when I’m ready to create my next video. I will definitely be using this tutorial to help me out.

    Thanks I hope you have a great day.

  10. Hi Mark, I am enjoying Member Player 1.8. My only concern is how to generate a Sitemap for Videos? XML Sitemap does not seem to find even the YouTube videos.

    Do you have any suggestions?

    Murray

    • Hi Jonathan, thank you very much. I must say, I am very pleased with memberplayer. It is awesome actually.

      Regarding your question, you do not need a video sitemap for Youtbe videos, only self hosted videos. You can manually add a sitemap yourself. If you have a siteap generator, then it would have to support memberplayer, which because it is so new, it would not yet. I have a generator, and I still have to add support to memberplayer. At the same time, Google is now really good at picking up videos on your webpages without a sitemap at all, although with a sitemap it is better for control.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 3)

Sign up to newsletter