The problem of embedding audio and video to a webpage... and the solution

When it comes down to adding any audio or video file to a webpage so a user can play it, there's a problem.

Basically, different browsers support different audio/video types. Some browsers support one audio/video type while other browsers don't support it. Some browsers support a tag for audio/video while others don't.

So how is this solved?

The most basic solution is to use an HTML5 tag with <source> tags and then an <embed> tag, which plays the file if the browser is older and doesn't support HTML5.

This is the code for audio. All italic is where the user-defined code goes.

<audio attributes>
<source type="audio/mp3" src="filename.mp3" />
<source type="audio/ogg" src="filename.ogg" />
<source type="audio/wav" src="filename.wav" />
<embed src="filename.mp3/other" />
</audio>

The code for video is similar:

<video attributes>
<source type="video/mp4" src="filename.mp4" />
<source type="video/ogg" src="filename.ogg" />
<source type="video/webm" src="filename.webm" />
<embed src="filename.mp4/other" />
</video>

You may want to make multiple copies of the file. Each file will be a different file type. Then you can create how ever many <source> tags are needed, and pick the best one to use for the <embed> tag.

While this solution is a good one, it still has a couple flaws. For example, you cannot provide a fallback for the <embed> element. Another one is that if the <embed> fallback is used in no-HTML5-support browsers, the browser may still be missing something like a plugin to play the file.

I recommend that you find something (like YouTube) that allows you to embed media on a website, cross-browser.