This is a companion article to the comprehensive guide on HTML5 video integration. In this article, you will learn how compression or other processing of HTML5 video (resizing or downscaling) affects quality and will see a comparison with YouTube. A two minute video is used.
This should demonstrate how dimensions, conversion and formats affect quality. Desktop versions first. You have to evaluate it on the desktop PC.
webm (1192x794 9.4M), with poster, no preload
// Extracted poster fist frame (Result: 55K jpg) # ffmpeg -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg // If you need some specific second // # ffmpeg -ss 2.5 -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg
Safari on iOS (iPhone) is unlikely to play it. You might also have the issue I'm having with the playback progress bar (it keeps jumping or setting at the end).
mp4 (1192x794 2.2Mb), with poster, no preload
# ffmpeg -i demo-2m-desktop.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-desktop.mp4
Looks like the best default to go with.
webm downscaled (resized) to 750px width
webm (750x500 812K), with poster, no preload
# ffmpeg -i demo-2m-desktop.webm -vf scale=750:-1 -r 24 demo-2m-desktop-750.webm // Poster (Result: 29K jpg) # ffmpeg -i demo-2m-desktop-750.webm -frames:v 1 demo-2m-desktop-750.jpg // Get dimensions # ffprobe -v error -select_streams v -show_entries stream=width,height -of csv=p=0:s=x demo-2m-desktop-750.webm 750x500 // Alternative option # ffprobe -v error -show_entries stream=width,height -of default=noprint_wrappers=1 demo-2m-desktop-750.webm width=750 height=500
Safari on iOS (iPhone) is unlikely to play it. Lengthy processing. Blurry quality even for full screen size (width = 100% in CSS, blog width equal to 750px video). However, awesome size - 812K only. It is worth noting that when you watch this video not embedded in the website (i.e. without applying CSS styles), the quality is better. Try opening this video in your browser outside of the integration with the website and you will see less blurring (same when you remove width/height styles in CSS). Theoretically, this is an awesome option for sending by email or when you need to showcase a non-embedded video. Just imagine, only 812K!
webm converted to
mp4 (750x500, 1.1Mb), with poster, no preload
# ffmpeg -i demo-2m-desktop-750.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-desktop-750.mp4
The size is increased in compare with the resized
webm. Same quality issues. Bigger than
webm but will play on iOS (iPhone). However, you don't need a desktop size on an iPhone, so this option seems useless.
webm downscaled to 750px with conversion to
mp4 (750x500 1Mb), with poster, no preload
# ffmpeg -i demo-2m-desktop.webm -vf scale=750:-1 -r 24 demo-2m-desktop-750-from-original.mp4
Size similar to above. Quicker operation than converting webm → webm. The same quality issues. Probably even worse quality.
webm uploaded on YouTube (desktop)
This should demonstrate how dimensions, conversion and formats affect quality. Mobile versions. You have to evaluate it on the phone. Original video recorded at iPhone SE resolution emulated in DevTools (F12) by the Screen Recorder app. The device emulator shows 375x667 but the result is 396x706 - see also this article.
webm (396x706 12Mb), with poster, no preload
// Get poster # ffmpeg -i demo-2m-mobile.webm -frames:v 1 demo-2m-mobile.jpg // Get dimensions # ffprobe -v error -select_streams v -show_entries stream=width,height -of csv=p=0:s=x demo-2m-mobile.webm 396x706
Safari on iOS (iPhone) is unlikely to play it. Big size in compare with
mp4 below. You might also have the issue I'm having with the playback progress bar (it keeps jumping or setting at the end).
mp4 (396x706 2.5Mb), with poster, no preload
# ffmpeg -i demo-2m-mobile.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-mobile.mp4
Seems to be the optimal version for mobile. When tested on a ~6" phone full screen, the quality seems to be even better than the original
webm uploaded on YouTube (mobile)
Usually YouTube manages to render at the best quality for any screen size, but not this time when you upload the video with this initial resolution (396x706). Try full screen on a ~6" phone and see the problem. Also the video is not yours but on YouTube, possibly with their ads and the risk of being removed if the policy changes.
1. The issue raised here has not been resolved natively in the browser as of May 2022. You can test it on this very page.
2. This is about the progress bar (a timeline) issue:
iPhone specific examples
See my HTML5 Ultimate Integration Guide in section 4.3 for some interesting examples of how a video recorded on an iPhone and then converted is rendered in browsers. The examples are interesting because we fit higher resolution videos to the same 396px width and you can see the quality yourself.
I post useful information on my blog and share my experience for free. I don't post links to Amazon or anything like that. If my articles educated you, or maybe even helped you earn or save money or find a job, please consider donating to support me writing and sharing more knowledge. How will I use donations? I will buy food for cats that we have adopted from shelters.