To play videos compatible in different browsers, you need to use the HTML <source> element and provide multiple formats. The specific steps are as follows: 1. Add multiple <source> elements in the

To make your video work across different browsers, you can use the HTML <source></source> element inside the <video></video> tag. Browsers will try each source in order until they find one they support.

Here's how to do it:

Use the <source></source> Element with Different Formats

Instead of linking directly to a single video file inside the <video></video> tag, you can list multiple <source></source> elements. Each one points to a different version of the video file — usually in different formats like MP4, WebM, and Ogg.

Example:

 <video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

• MP4 is widely supported on most modern browsers and mobile devices.
• WebM is open-source and works well in Chrome, Firefox, and Edge.
• Ogg is older but still useful for some versions of Firefox and Opera.

Browsers will go through these sources one by one. If none match, the fallback text “Your browser does not support the video tag” will show up.

Know Which Formats Work in Which Browsers

Not all browsers support the same video codecs. Here's a quick guide:

• Chrome : MP4, WebM, Ogg
• Firefox : MP4, WebM, Ogg
• Edge : MP4, WebM
• Safari (macOS/iOS) : MP4 (HEVC/H.264), MOV
• Older IE versions : Limited support; often needs Flash fallbacks (not recommended anymore)

So if you want broad compatibility, include at least MP4 and WebM. Safari supports MP4, so that should cover iOS and macOS users.

You don't need to add every possible format — just the major ones that cover your audience.

Add Media Types and File Extensions Correctly

When using <source> , always include the type attribute. This helps the browser skip unsupported formats quickly without downloading them.

Example:

 <source src="video.mp4" type="video/mp4">

Make sure the file extension matches the actual video file (like .mp4 , .webm , .ogg ). Also double-check that the server is configured to serve those MIME types correctly. Otherwise, some browsers might not load the files even if they're supported.

If you're hosting videos yourself, confirm with your web host or CDN that these MIME types are enabled:

• video/mp4
• video/webm
• video/ogg

That way, browsers won't run into issues when trying to play the video.

Basically that's it. As long as you prepare multiple video formats, list them in <source></source> , and then match them with the appropriate type attribute, most browsers can play normally. What is not complicated but is easy to ignore details is whether the server's MIME type settings and file extension are correct.

The above is the detailed content of How do I use the element to provide multiple video sources for different browsers?. For more information, please follow other related articles on the PHP Chinese website!