To convert uploaded MP4s into browser-friendly formats via an API, the usual approach is:

1. Upload the MP4
2. Send it to a transcoding API/job
3. Convert to formats browsers play well
4. Return a playable URL or embed code

Common browser-friendly output formats

Best choice: HLS

• Output: .m3u8 playlist + .ts or .m4s segments
• Why: Works well for adaptive streaming, fast start, good across devices
• Browser support: Native in Safari; in Chrome/Firefox/Edge usually via hls.js

Also common: MP4 (H.264 + AAC)

• Output: .mp4
• Why: Universal fallback, easy to play with <video>
• Tip: Make sure it’s encoded as:
  • Video: H.264
  • Audio: AAC
  • Fast start: moov atom at the front (+faststart)

For modern streaming: DASH

• Output: .mpd + segments
• Why: Good for adaptive streaming
• Browser support: Usually via JavaScript player libraries, not native in most browsers

---

Typical API flow

1) Upload the file

Your backend gets the MP4 from the client:

• multipart/form-data
• direct-to-storage upload (S3, GCS, etc.)
• signed upload URL

2) Create a conversion job

Send the uploaded file URL/path to a transcoding service or your own worker.

Example job request

{
  "input_url": "https://storage.example.com/uploads/video.mp4",
  "outputs": [
    {
      "type": "hls",
      "resolution": "1280x720",
      "video_bitrate": "2500k",
      "audio_bitrate": "128k"
    },
    {
      "type": "mp4",
      "codec": "h264",
      "fast_start": true
    }
  ]
}

3) Poll job status or use webhooks

The API typically returns a job ID:

{
  "job_id": "abc123",
  "status": "queued"
}

Then either:

• poll /jobs/abc123
• or receive a webhook when done

4) Serve the converted media

You’ll get output URLs like:

• https://cdn.example.com/video/master.m3u8
• https://cdn.example.com/video/fallback.mp4

---

Example browser playback

HLS in HTML

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  const src = 'https://cdn.example.com/video/master.m3u8';

  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src; // Safari
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else {
    console.log('HLS not supported in this browser');
  }
</script>

MP4 fallback in HTML

<video controls>
  <source src="https://cdn.example.com/video/fallback.mp4" type="video/mp4">
</video>

---

If you’re building the API yourself

A simple architecture is:

• Upload service: receives MP4
• Queue: Redis/SQS/RabbitMQ
• Worker: runs FFmpeg
• Storage: S3/GCS/local object store
• CDN: serves outputs

FFmpeg examples

Convert to browser-friendly MP4

ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4

Convert to HLS

ffmpeg -i input.mp4 \
  -c:v libx264 -c:a aac \
  -f hls \
  -hls_time 6 \
  -hls_playlist_type vod \
  master.m3u8

---

Managed API options

If you don’t want to run FFmpeg yourself, use a video API platform such as:

• Mux
• Cloudflare Stream
• AWS Elemental MediaConvert
• Cloudinary video
• Transloadit

They usually provide:

• upload endpoints
• automatic transcoding
• HLS/DASH generation
• thumbnails
• playback URLs

---

Recommended setup

If your goal is “works in browsers reliably”:

• Generate HLS for primary playback
• Generate MP4 H.264/AAC as fallback
• Put both behind a CDN
• Use a JS player like hls.js for non-Safari browsers

If you want, I can also give you:

1. a Node.js API example,
2. a Python/FastAPI example, or
3. an FFmpeg + S3 + webhook workflow.