{"id":1021,"date":"2013-09-13T14:39:56","date_gmt":"2013-09-13T13:39:56","guid":{"rendered":"http:\/\/paulo72.com\/?p=1021"},"modified":"2017-05-17T23:21:52","modified_gmt":"2017-05-17T22:21:52","slug":"encoding-video-for-the-web","status":"publish","type":"post","link":"https:\/\/actino.local\/other\/encoding-video-for-the-web\/","title":{"rendered":"Encoding Video For The Web"},"content":{"rendered":"<h2 id=\"the-problem\"><a href=\"#the-problem\" class=\"heading-link\"><i class=\"glyphicon glyphicon-link\">#<\/i><\/a>The Problem<\/h2>\n<p>To try and encode video that plays in all of the following:<\/p>\n<ul>\n<li>iPhone (Safari, Chrome)<\/li>\n<li>iPad (Safari, Chrome)<\/li>\n<li>Android (Browser and Dolphin)<\/li>\n<li>Windows (IE7 and up, Chrome, Firefox, Opera etc.)<\/li>\n<li>OS X (All current browsers)<\/li>\n<\/ul>\n<p>Sounds easy? Just encode an MP4 in <a href=\"http:\/\/handbrake.fr\/\">HandBrake<\/a>, and <a href=\"http:\/\/www.longtailvideo.com\/\">JWPlayer<\/a> will do the rest? Nearly.<\/p>\n<p>JWPlayer will work just fine however the various different devices can be pretty picky about the exact encoding format. Android and IE9 in particular get all distressed and soil themselves if it isn&#8217;t just-so.<\/p>\n<h2 id=\"the-solution\"><a href=\"#the-solution\" class=\"heading-link\"><i class=\"glyphicon glyphicon-link\">#<\/i><\/a>The Solution<\/h2>\n<p>After hours of Googling and experimentation with encoding formats and details these are the Handbrake settings that worked for me.<\/p>\n<p>The significant option selections are highlighted with red circles.<\/p>\n<img loading=\"lazy\" class=\"alignnone size-large wp-image-1292\" src=\"http:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-1024x720.png\" alt=\"\" width=\"1024\" height=\"720\" srcset=\"https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-1024x720.png 1024w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-300x211.png 300w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-768x540.png 768w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-1400x985.png 1400w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-1344x945.png 1344w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06-672x473.png 672w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/Screen-Shot-2017-04-16-at-17.48.06.png 1848w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p>The key here is to choose MP4, encoded in x264.<\/p>\n<p>The \u2018Level: 3\u2019 and \u2018Profile: Baseline\u2019 bit is for support on older Android devices. Checking \u2018Web Optimised\u2019 moves the MOOV Atom to the front of the video, which means that it streams properly (otherwise your browser\u00a0has to download the entire video before it can start to play).<\/p>\n<p>I don&#8217;t think I changed any audio settings. These see to be the default settings for x264 and they work just fine.<\/p>\n<a href=\"http:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1023\" src=\"http:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio.png\" alt=\"audio\" width=\"1072\" height=\"750\" srcset=\"https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio.png 1072w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio-300x210.png 300w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio-768x537.png 768w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio-1024x716.png 1024w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/audio-672x470.png 672w\" sizes=\"(max-width: 1072px) 100vw, 1072px\" \/><\/a>If you started off by using a preset you might find that Handbrake has re-sized your videos to a more standard aspect ratio. Click \u2018Picture settings\u2019 at the top of the main interface to see the size at which your video will be output.<\/p>\n<p>If they are not as you wish\u00a0then change them here. Uncheck the \u2018Keep Aspect Ratio\u2019 option\u00a0if it will not allow you to select your preferred dimensions, and \u00a0switch \u2018Anamorphic\u2019 to none (unless you want the black letterboxing effect). Also check the \u2018Cropping\u2019 is set to zero.<\/p>\n<p><a href=\"http:\/\/actino.local\/wp-content\/uploads\/2013\/09\/picture.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1024\" src=\"http:\/\/actino.local\/wp-content\/uploads\/2013\/09\/picture.png\" alt=\"picture\" width=\"573\" height=\"276\" srcset=\"https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/picture.png 573w, https:\/\/actino.local\/wp-content\/uploads\/2013\/09\/picture-300x145.png 300w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/a>\n<h2 id=\"the-code\"><a href=\"#the-code\" class=\"heading-link\"><i class=\"glyphicon glyphicon-link\">#<\/i><\/a>The Code<\/h2>\n<p>If you are using html5 &lt;video&gt; tags you won&#8217;t need the below. We needed to provide a Flash fallback as our browser support went back to pre-html5 browsers.<\/p>\n<pre><code class=\"language-markup\">&lt;div\u00a0id=\"myVideo\"&gt;&lt;\/div&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"\u00a0src=\"jwplayer.js\"&gt;&lt;\/script&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0jwplayer.key=\"thisisthejwplayerauthorisationkey==\"\r\n\u00a0\u00a0jwplayer(\"myVideo\").setup({\r\n\u00a0\u00a0\u00a0\u00a0file:\u00a0\u00a0\u00a0\u00a0\u00a0\"vip9.mp4\"\r\n\u00a0\u00a0\u00a0\u00a0width:\u00a0\u00a0\u00a0\u00a0720\r\n\u00a0\u00a0\u00a0\u00a0height:\u00a0\u00a0\u00a0400\r\n\u00a0\u00a0\u00a0\u00a0primary:\u00a0\u00a0\"flash\"\r\n\u00a0\u00a0\u00a0\u00a0analytics:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0enabled:\u00a0false\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cookies:\u00a0\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0});\r\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>How to encode mp4 video files that work with HTML5 and Flash in Android, iOS, IE9 and the rest.<\/p>\n","protected":false},"author":1,"featured_media":1128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[45],"yst_prominent_words":[105,188,90,88,85,94,97,82,101],"_links":{"self":[{"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/posts\/1021"}],"collection":[{"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/comments?post=1021"}],"version-history":[{"count":7,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/posts\/1021\/revisions"}],"predecessor-version":[{"id":1352,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/posts\/1021\/revisions\/1352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/media?parent=1021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/categories?post=1021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/tags?post=1021"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/actino.local\/wp-json\/wp\/v2\/yst_prominent_words?post=1021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}