HTML Video Sources Should Be Responsive

Scott Jehl speaks out:

Removing media support from HTML videos is a bug. This means that for every video we embed in HTML, we have to choose to provide source files that may be too large or too small for many user devices (which lead to poor performance, waste of data, and even poor quality on large screens), or to turn to more complex server-side, scripting, or third-party solutions to provide the correct size.

I remember when the responsive images first appeared. One way to explain it is to say it's like<video></video> Tags, you can have multiple elements inside (in supported browsers), allowing you to specify properties such as type (such as video format) and media (such as screen size). But then...

Although the feature has been implemented in multiple browsers, it has been removed from the browser and HTML specifications without any functional alternatives. One exception is that the feature was never removed from WebKit, so it still works in the Safari browser, which is fine.

I don't remember it. It feels like a huge WTF moment (some background). I think the network is excellent in backward compatibility. We rarely delete things directly, and it is even rarer to delete things without alternatives.

So now the responsive image has succeeded (it is successful, right? I can't imagine how much bandwidth it saves for the world)… Can't we... put it back?

When I need this feature right away, I always think of Cloudinary because I can change the size and format of the video by changing the URL. For example, this is a video URL where the video codec is automatically determined and the size is forced to be reduced to 400 pixels:

 <code>https://res.cloudinary.com/css-tricks/video/upload/c_scale,q_auto,vc_auto,w_400/v1612795501/intro-patreon_jpd8er.mp4</code>

It's great to have a tool like this, but that doesn't mean the platform shouldn't help.

The above is the detailed content of HTML Video Sources Should Be Responsive. For more information, please follow other related articles on the PHP Chinese website!