Using FFMPEG with HTML5 for online video hosting

HTML5 introduced the native <video> element, enabling browsers to play videos without plugins like Flash. FFMPEG is a powerful command-line tool that can convert videos into HTML5-compatible formats for seamless web streaming.

HTML5 Video Formats

Modern browsers support three main video formats:

Converting Videos with FFMPEG

FFMPEG can convert any video format to HTML5-compatible formats. Here are the most common conversion commands:

Convert to MP4 (H.264)

ffmpeg -i input.avi -c:v libx264 -c:a aac -b:v 1M -b:a 128k output.mp4

Convert to WebM

ffmpeg -i input.avi -c:v libvpx -c:a libvorbis -b:v 1M -b:a 128k output.webm

Create Multiple Formats

# MP4 for maximum compatibility
ffmpeg -i input.avi -c:v libx264 -preset medium -crf 23 -c:a aac video.mp4

# WebM for smaller file size
ffmpeg -i input.avi -c:v libvpx-vp9 -crf 30 -c:a libopus video.webm

HTML5 Video Implementation

Once you have converted your videos, implement them using the HTML5 video element with multiple source formats:

<video width="640" height="480" controls>
    <source src="/videos/sample.mp4" type="video/mp4">
    <source src="/videos/sample.webm" type="video/webm">
    <p>Your browser does not support HTML5 video.</p>
</video>

Advanced FFMPEG Options

For professional video hosting, consider these optimization techniques:

Responsive Video Sizes

# Create multiple resolutions
ffmpeg -i input.mp4 -s 1920x1080 -c:v libx264 -crf 23 video_1080p.mp4
ffmpeg -i input.mp4 -s 1280x720 -c:v libx264 -crf 23 video_720p.mp4
ffmpeg -i input.mp4 -s 854x480 -c:v libx264 -crf 23 video_480p.mp4

Generate Video Thumbnails

# Extract thumbnail at 5 seconds
ffmpeg -i input.mp4 -ss 00:00:05 -vframes 1 -q:v 2 thumbnail.jpg

Working with Legacy Flash Players

For legacy support, FFMPEG can also convert to FLV format used by Flash-based players like Flowplayer. FLV uses the same H.264 encoding as MP4:

ffmpeg -i input.avi -c:v libx264 -c:a aac -f flv output.flv

Use flvtool2 to add metadata to FLV files for better streaming performance:

flvtool2 -U output.flv

Complete Video Hosting Setup

Here's a complete example combining FFMPEG conversion with HTML5 video implementation:

// JavaScript for dynamic video loading
function loadVideo(videoId) {
    const videoElement = document.getElementById('main-video');
    const mp4Source = document.getElementById('mp4-source');
    const webmSource = document.getElementById('webm-source');
    
    mp4Source.src = `/videos/${videoId}.mp4`;
    webmSource.src = `/videos/${videoId}.webm`;
    
    videoElement.load(); // Reload video with new sources
}

// HTML structure
document.body.innerHTML = `
    <video id="main-video" width="800" height="450" controls poster="/images/poster.jpg">
        <source id="mp4-source" type="video/mp4">
        <source id="webm-source" type="video/webm">
        <p>Your browser does not support HTML5 video.</p>
    </video>
`;

// Load initial video
loadVideo('sample-video');

Conclusion

FFMPEG provides comprehensive video conversion capabilities for HTML5 video hosting. Use MP4 for maximum browser compatibility and WebM for optimized file sizes. Always provide multiple formats and fallbacks for the best user experience.