[Solved]-FFMPEG Converted Mp4 Video Not Working In HTML5-C#

If you're encountering issues with MP4 videos converted using FFMPEG not playing back in an HTML5 <video> tag, it often comes down to the video's encoding settings not being fully compatible with the web or the specific browsers. In this post we are discuessing several steps you can take to troubleshoot and solve this problem:

I'm currently working on a web application, and my requirement is to display a video gallery on the website. To achieve this, I've converted all video files to MP4 format using FFMPEG. Since MP4 is supported by all browsers, it seemed like the ideal choice.

In the web application, there's a section where users can upload videos of any format. After successful upload, we display the video using a jQuery plugin that utilizes HTML5 video tags for playback.

However, after converting the videos to MP4 using FFMPEG, they don't play in Firefox and Chrome browsers.

I've tried various encoding options, server configurations, FFMPEG versions, and other video encoder libraries, but I haven't been able to resolve this issue.

After extensive searching and consulting various websites, I finally found the solution related to the FFMPEG executable.

HTML5 relies on MPEG-4 files with H.264 video codec (and AAC audio codec) in Internet Explorer and Chrome. Therefore, the converted video should use this codec. Thus, the command should be adjusted accordingly.

" -i " + input + " -acodec aac -strict experimental -ac 2 -ab 128k -vcodec libx264 -f mp4 -crf 22 -s 640x360 " + output

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ConvertVideoMp4("MyFiles/TestMkv.mkv", ".mp4");
    }
    public static string ConvertVideoMp4(string file, string convertedExtension)
    {
        string result = string.Empty;
        string input = string.Empty;
        string output = string.Empty;
        try
        {
            // path of ffmpeg.exe -replace it for your.
            string ffmpegFilePath = HttpContext.Current.Server.MapPath("Video/ffmpeg.exe");
            FileInfo fi = new FileInfo(HttpContext.Current.Server.MapPath(file));

            string filename = Path.GetFileNameWithoutExtension(fi.Name) + "output";
            //output video name

            string extension = Path.GetExtension(fi.Name);
            input = HttpContext.Current.Server.MapPath(file);
            output = HttpContext.Current.Server.MapPath("Video/" + filename + convertedExtension); 
            
            //path where you want to save your converted video
            string cmd = " -i " + input + " -acodec aac -strict experimental -ac 2 -ab 128k -vcodec libx264 -f mp4 -crf 22 -s 640x360 " + output;
            var processInfo = new ProcessStartInfo(ffmpegFilePath, cmd)
            {
                UseShellExecute = false,
                CreateNoWindow = true,
                RedirectStandardOutput = true,
                RedirectStandardError = true
            };

            try
            {
                Process process = System.Diagnostics.Process.Start(processInfo);
                result = process.StandardError.ReadToEnd();
                process.WaitForExit();
                process.Close();

            }
            catch (Exception)
            {
                result = string.Empty;
            }
        }
        catch (Exception ex)
        {
            string error = ex.Message;
        }
        return result;
    }

}

1. Use a Web-Compatible Codec

Ensure you're using H.264 for video and AAC for audio, as these are widely supported codecs for web use. Use the following FFMPEG command to convert your video to a web-compatible format:

ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output.mp4

2. Include the MOOV Atom

The MOOV atom (a crucial metadata container) must be at the beginning of the file for immediate playback on the web. This process is known as "fast start". You can achieve this with FFMPEG by adding the -movflags +faststart option:

ffmpeg -i input.mp4 -vcodec libx264 -acodec aac -movflags +faststart output.mp4

3. Check Browser Compatibility

Ensure the browsers and versions you're targeting support MP4 playback. While modern browsers generally do, specific versions or configurations may not. It's also a good idea to provide video in another format (like WebM) as a fallback.

4. Check MIME Types on the Server

Your server needs to serve MP4 files with the correct MIME type. Ensure your server is configured to serve MP4 files as video/mp4. This usually involves configuring your web server's settings or .htaccess file.

5. Reduce Video Specifications

If the video's resolution or bitrate is too high, it might fail to play on some devices or networks. Try lowering the resolution and bitrate to see if that resolves the issue:

ffmpeg -i input.mp4 -vcodec libx264 -b:v 1000k -s 1280x720 -acodec aac -movflags +faststart output.mp4

By following above these steps, you should be able to resolve most issues with MP4 videos not playing in an HTML5 context.