Html – AVI to MP4 – ffmpeg conversion

ffmpeghtmlvideo

I'm running a debian 7.5 machine with ffmpeg-2.2 installed following these instructions

Issue

I'm trying to display a mp4 video inside my browser. The original file has an AVI container format. I can successfully convert it to mp4 and the targetfile is readable (video + sound) with the totem movie player. So I thought everything would be OK displaying the bellow page

HTML5 web page

<!DOCTYPE html><html>
<head>
    <title>Webcam</title>
</head>
<body>
<video width="640" height="480" controls>
  <source src="/path/to/output.mp4" type="video/mp4">
<h3>Your browser does not support the video tag</h3>
</video>
</body></html>

Input probe

$ ffprobe -show_streams input.avi

  Duration: 00:08:22.90, start: 0.000000, bitrate: 1943 kb/s
    Stream #0:0: Audio: mp3 (U[0][0][0] / 0x0055), 48000 Hz, stereo, s16p, 64 kb/s
    Stream #0:1: Video: mpeg4 (Advanced Simple Profile) (XVID / 0x44495658), yuv420p, 720x540 [SAR 1:1 DAR 4:3], 1870 kb/s, 29.97 fps, 25 tbr, 29.97 tbn, 25 tbc

Convert

$ ffmpeg -y -fflags +genpts -i input.avi -acodec copy -vcodec copy ouput.mp4

Html browser

Opening the above html file plays sound but no video is displayed.

When I use other .mp4 files, videos succesfully displayed so I'm sure I face a conversion issue.

Not : I've tryed a lot of other ffmpeg options but without success.

Any idea ?

Thanks in advance.

Best Answer

Your command was stream copying (re-muxing) MPEG-4 Part 2 video into MP4 container, but this format is probably not playable by the browser. You should use H.264 video instead for MP4 container:

ffmpeg -i input.avi -c:v libx264 <... more options ...> -c:a libfaac \
-movflags +faststart output.mp4

-movflags +faststart will allow the video to begin playback before the file is completely downloaded by the viewer.

Note that you can specify multiple alternative media resources for compatibility:

<video width="640" height="480" controls>
  <source src="/path/to/output.mp4" type="video/mp4">
  <source src="/path/to/output.webm" type="video/webm">
  <source src="/path/to/output.ogv" type="video/ogg">
  ...
</video>

Also see:

Related Topic