StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is no format that can play on every device and browser. HTML5 is getting us closer, but there is still debate on formats and codecs. My friends at Zencoder have a new blog post blog post (<a href="http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/">HERE</a>) that addresses this exact issue.</p> <p>EDIT: you asked for more specifics. Again, it depends on what platforms you wish to target. I will cover a couple here. </p> <p>This should play on all modern browsers that support the h.264 codec. It should also play on iPhone4 and above:</p> <pre><code>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4 </code></pre> <p>The iPhone 3gs does not support main profile, and its max supported resolution is 640x480. This command will encode for this older device.</p> <pre><code>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4 </code></pre> <p>I encoded some sample files and created a web page here: <a href="http://szatmary.org/stackoverflow/18758133/">http://szatmary.org/stackoverflow/18758133/</a></p> <p>The HTML looks like this:</p> <pre><code><!DOCTYPE html> <html> <body> <br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v main -b:v 512k -s 1280x720 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie1.mp4<br> <video controls> <source src="movie1.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <br>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 -vcodec libx264 -profile:v baseline -b:v 512k -s 640x432 -r:v 30 -acodec libfdk_aac -b:a 128k -movflags faststart -y movie2.mp4<br> <video controls> <source src="movie2.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html> </code></pre> <hr> <p>Here the command broken down into what each element means:</p> <p>command + input file (should be obvious):</p> <pre><code>ffmpeg -i ~/Dropbox/Test\ Content/bigbuckbunny/bigbuckbunny_1500.mp4 </code></pre> <p>Use libx264 to encode the video:</p> <pre><code>-vcodec libx264 </code></pre> <p>Set the h.264 profile to main. baseline will allow for playback on older devices, but you will sacrifice a little quality:</p> <pre><code>-profile:v main </code></pre> <p>Set the bitrate to 512 kilobits per second. Choose a value based on the available bandwidth. Higher for LAN/WiFi, lower for 3G/LTE</p> <pre><code>-b:v 512k </code></pre> <p>Scale the video to 720p resolution (Again depends on target platform)</p> <pre><code>-s 1280x720 </code></pre> <p>Encode at 30 frames per second:</p> <pre><code>-r:v 30 </code></pre> <p>Use libfdk_aac to encode the audio. Or use libmp3lame if you want mp3. AAC is highly recommended. It has much better support on ios and produces higher quality audio:</p> <pre><code>-acodec libfdk_aac </code></pre> <p>Set audio bitrate to 128 kilobits per second. You may adjust this for bandwidth as well. with AAC you can probably go as low as 32k </p> <pre><code>-b:a 128k </code></pre> <p>Set audio sampling rate to 48000 sample per second. If using mp3, do 44100 for ios</p> <pre><code>-r:a 48000 </code></pre> <p>This tells ffmpeg to place the moov atom at be start of the mp4 file. </p> <pre><code>-movflags faststart </code></pre> <p>Output file (-y tells ffmpeg it can overwrite the file without asking)</p> <pre><code>-y movie1.mp4 </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload