Simple audio, video and Flash uses in HTML 5
Many web browsers introduced support for the HTML 5 audio and video elements, providing the easy way to add media into HTML pages. At the moment, Ogg Theora or Theora, Ogg Vorbis or Vorbis, and WAV format media is supported.
Vorbis is an audio format specification and codec for lossy audio compression. Vorbis is free and mostly used in conjunction with the Ogg format and it is therefore often known as Ogg Vorbis.
Filename extension: .ogg .oga
Internet media type: audio/ogg, audio/vorbis, audio/vorbis-config
Theora is a free and open lossy video compression codec. It includes the Vorbis audio codec and the Ogg container.
Filename extension: .ogv
Internet media type: video/ogg
Adding Media with HTML 5
Adding media in your HTML document is very easy. This example plays a Ogg video from HTML5Samples website.
<video src="http://html5samples.com/Files/video_test.ogg" controls> Your browser does not support the <code>video</code> element. </video>
Multiple source files can be given using the source element in order to provide video/audio encoded in different formats for different browsers. For example:
<video controls> <source src="video_test.ogg" type="video/ogg"> <source src="video_test.mp4"> Your browser does not support the <code>video</code> element. </video>
will by play the Ogg video file in browsers supporting the Ogg format. If the browser couldnt play Ogg file, it should try to use the MPEG-4 file.
You also can define which codecs the media file must uses; this example lets the browser to make even more smart decisions:
<video controls> <source src="video_test.ogg" type="video/ogg; codecs="dirac, speex""> Your browser does not support the <code>video</code> element. </video>
Here, we define that the video must uses the Dirac and Speex codecs. If the browser only supports Ogg, but not Dirac and Speex codecs, the video will not be loaded.
If type isn’t specified, the media’s type is retrieved from the server and checked to see if Gecko can handle it; if it can’t be rendered, the next source is checked. If none of the specified source elements can be used, an error event is dispatched to the video element. If type is specified, it’s compared against the types Gecko can play, and if it’s not recognized, the server doesn’t even get queried; instead, the next source is checked at once.
Using Flash
You could use object element to play a Flash format movie if the HTML 5 video element doesn’t work:
<video src="video_test.ogv" controls>
<object data="video_test.swf" type="application/x-shockwave-flash">
<param value="video_test.swf" name="movie"/>
</object>
</video>
You shouldn’t embed classid in the object tag if you want it to be compatible with browsers other than Internet Explorer.
Incoming search terms:
- html5samples com/files/video_test ogg
- simple html code audio
Hi, This is a excellent blog, but I was wondering how do I suscribe to the RSS feed?
Hi Johnny
Here is the link to RSS feed:
http://html5samples.com/feed/
One of my friends already told me about this place and I do not regret that I found this article.
I love your take on this, could not agree more.
very good insight, I really enjoyed reading this, keep it up!
very good insight, I really enjoyed reading this, keep it up!
Hi there,
Great site, Ive got another great blog id like to share with you been following the articles these guys are writing about protein supplements and the like. really good stuff might be of some use to yourself and your readers.
keep it up!
You have really great taste on catch article titles, even when you are not interested in this topic you push to read it
I couldn’t agree more, thanks for writing.
Seu site é bem visualizado em todos os meus navegadores, incluindo o explorer. O meu tem problemas com o explorer, mas estou solucionando. Seu site é bem feito realmente.
excellent post, you must got another subscriber
interesting read, if you get a chance check out my site.
Quando pesquiso no Google, as vezes encontro umas páginas que dão para seu site. Você está bem indexado, provavelmente! Parabéns!
interesting read, if you get a chance check out my site.
if you want to get more backlinks to your site, check out my home page
if you want to get more backlinks to your site, check out my home page
great post, I am really enjoying your site
great post, I am really enjoying your site
great post, I am really enjoying your site
Votre article est bon, mais j’ai trouvé un comme ça. Saviez-vous que quelqu’un est la copie? J’ai beaucoup apprécié votre site vraiment!
I read about it some days ago in another blog and the main things that you mention here are very similar
It’s an amazing, thanks you
nfmpbgez…
nfmpbgez…