What bunch of ffmpeg scripts do I need to get HTML5-compatible "Video for everybody"?

Question

I would like to transpose the conditional code below into the vue.js semantics

<table>
    <div class="btn-group" data-toggle="buttons">
        <tr>
            @foreach($sintese as $s)
                <td>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" name="chksintese" id="{{$s->cod_sintese_conversa}}">
                        <span class="glyphicon glyphicon-ok"></span>
                        {{$s->descricao}}
                    </label>
                </td>

                @if ($loop->iteration % 10 == 0 && !$loop->last)
                    </tr><tr>
                @endif
            @endforeach
        </tr>
    </div>
</table>

Solution

Note: This answer was heavily edited since its original posting. It's 2017 now; streaming works differently than it used to. This guide assumes simple progressive download of one video stream at one given resolution – no adaptive streaming.

Requirements

First off, make sure to download a recent ffmpeg version (download a static build; don't call apt-get install ffmpeg or similar). Ideally, compile it yourself. It doesn't take too long.

To generate videos supported by the most browsers, always check the latest compatibility table. There is no single codec/format that works in every browser, but if you generate H.264 in MP4 and VP9 in WebM, with the respective audio codec, you will have support for Chrome, Firefox, Safari, and some versions of IE.

WebM (VP9 / Vorbis)

Follow the recommendations in the FFmpeg VP9 guide and use a two-pass encoding approach with rate constraints:

ffmpeg -y -i input-c:v libvpx-vp9 -b:v 2000k -minrate 500k -maxrate 2500k -c:a libvorbis -pass 1 -f webm /dev/null && \
ffmpeg -i input-c:v libvpx-vp9 -b:v 2000k -minrate 500k -maxrate 2500k -c:a libvorbis -pass 2 output.webm

The target bitrate depends on your resolution, frame rate, the type of content, and what quality you want. 2.5 MBit/s should be a good compromise for HD video at 30 fps. See this Google guide for some recommendations.

MP4 (H.264 / AAC)

Follow the recommendations in the FFmpeg H.264 guide and use a two-pass encoding approach with rate constraints:

ffmpeg -y -i input -c:v libx264 -b:v 5000k -minrate 1000k -maxrate 8000k -pass 1 -c:a aac -f mp4 /dev/null && \
ffmpeg -i input -c:v libx264 -b:v 5000k -minrate 1000k -maxrate 8000k -pass 2 -c:a aac -movflags faststart output.mp4

Here, the target bitrate should be about 50% higher than for VP9 video, as H.264 is not that efficient. Add the -movflags faststart option to the second pass to make initial loading of the video faster.

For setting audio options, see the AAC encoding guide.

Comments

[Admin]

Minor comment to your pseudocode examples: There's no .mov for HTML5 video, and there's no h.264 extension either. There is .264, which is the raw Annex B bytestream for NAL units. Video encoding is no rocket science, but you need to invest a little time to get to know the concepts.

[Samsquanch]

stackoverflow.com/help/how-to-ask

[Alan De Smet]

The 2013-12-19 version of one of your paragraphs cuts off in mid-sentence. "The audio defaults to 128 kBit/s again, but you can set q:a for variable bitrate, where values range from 0 to 500. 100 is default and higher means better. If"

[slhck]

@Mondain Indeed, but MPEG-TS/.m3u8 is not generally HTML5-compatible video. You need an HLS server and you need to know a little more about streaming, which is not really within the scope of this question.

[HebertZzz]

Good points, but from my experience thus far a simple http server can serve m3u8 to a video tag. The only thing one normally needs to do is add the mime types for m3u8 and ts to the respective server configuration.

[Samsquanch]

I'm voting to close this question as off-topic because it's a "please code this for me" question.