Three main types of multimedia exist on the web images, audio, and video. HTML5 has three tags to include, or embed, these elements into a web page:
The image tag <img> has one required attribute and several optional attributes. The image tag requires an image source attribute to be present. It is also important that images also provide alternate text so that all users can be aware of the image content.
<img src="http://example.com/image.webp" alt="Example image." />
Images can be given additional attributes including width, height, and a couple of attributes relating to image maps (images with specific interactive areas).
The GIMP is a free photo manipulation tool that you can use to create and edit images for your web pages and even create web layouts. Inkscape is a vector graphics (i.e. SVG) illustrator that can be used to create images, web pages, layouts, and other vector based projects.
The <audio> tag is new in HTML5. It gives designers a standard way to include audio in a page. The <audio> tag has several parameters the most important of which is source:
<audio src="file.ogg">Text for browsers that do not support the audio tag.</audio>
Other attributes for the <audio> tag include autoplay, controls, loop, and preload.
Several free tools exist with support for Ogg Vorbis audio:
The <video> tag is also new in HTML5. We can now insert video into a web page without the need for third party plugins! The source attribute is key to the video tag:
<video src="video.ogv">Text for browsers without support for the video tag.</video>
Additional attributes for the <video> tag include audio, autoplay, controls, height, loop, poster, preload, and width.
Ogg Theora and WebM are open formats for Internet video both of which work on Mozilla Firefox, Google Chrome, Chromium, Konqueror, and Opera. Several free tools exist to convert new and existing video to Ogg Theora and/or WebM including:
It is possible to offer alternative formats for browsers that do not support Ogg Theora or WebM. To do this, you nest multiple <source> tags within a <video> tag as such:
<video> <source src="file.ogv" type="video/ogg" /> <source src="file.webm" type="video/webm" /> <source src="file.mp4" type="video/mp4" /> Text or markup to display if the video does not play. </video>
There are also several video hosting/streaming communities that support open formats:
Finally got a simple example of video, image, and audio to work.
It turned out that I needed codecs with the video. I'm not sure why. It seemed like other people did not need them. I found tham on html5rocks (http://www.html5rocks.com/en/tutorials/video/basics/)
For the image, I was using a photo which was a large jpeg. I had to reduce its size to make it work.
The audio worked with no problems.
Here is the link to my work: http://makefriendswithalgebra.com/videoaudio.html
El problema que veo en la utilización de la etiqueta video, es que para cada navegador, necesitamos un formato de video diferente, con lo que esto aumenta considerablemente ya no el trabajo de convertir los videos a mp4, ogg o webm, si no que los hosting de nuestros servidores, se van a llenar de el mismo video, pero con extensiones diferentes, con lo cual, el peso de este va a aumentar considerablemente.
Si necesitais alguna ayuda, podeis contactar conmigo en email@example.com
Here is my work for this task:
For me in this code here the text shows even with the video playing
<!-- <video> <source src="file.ogv" type="video/ogg" /> <source src="file.webm" type="video/webm" /> <source src="file.mp4" type="video/mp4" /> Text or markup to display if the video does not play. </video> -->
the problem with your could be the single type of audio and video. There are two different types of audio files that you can add in your HTML code ( .ogg / .mp3 ) I suggest you to put both of them because IE doesn't support .ogg files, but it supports .mp3 files, so that means you need to add both of them. Ogg is for the webkit browsers and mp3 for IE. You can do it like this:
<source src="file/example.ogg" type="audio/ogg">
<source src="file/example.mp3" type="audio/mpeg">
So that means that you need to have both types of files and if you put them both in your code the browser will be able to recognise the file it supports.
The same thing is with video, only difference is that you have to put three types of files ( .ogv / mp4 / .webm):
<source src="file/example.ogv" type="video/ogg">
<source src="file/example.mp4" type="video/mp4">
<source src="file/example.webm" type="video/webm">
TU NAVEGADOR NO SOPORTA VIDEO OGG - Estarías viendo como se unen 2 cables con una fuente de calor
Try it, I hope it will help...
Ok, finaly did it... <video> and <audio> tags always seem so simple... but then when u get to work.... well... let's just say - takes more time than expected...
Anyway, here's what I did :
I changed the doctype to fit html5 and cleaned up meta section. I was watching one of Stanford Uni's videos, and in it the speaker said all the junk I had in <!DOCTYPE html> was now outdated. I also copied Alcinoe's code for audio, but all to no avail. I don't understand the ' holding cntrl than hit u key' bit. U as in letter u?
Yes on the u, I should have probably said go to view source but the new Firefox does not have that in the toolbar anymore and that is how you view source now in Firefox, hold cntrl hit u and the view source window pops out. Inbetween classes, sorry can't do more, was curious to this also, I bet if you view source on some of these others you will see what needs a tweek, but you must have or you would not have seen Alcinoes. Oh, what browser do you use? Try another, than you may have to find what they put in to support the browser that you do use, IE is famous for having to add extra things into the code to get what Chrome or Firefox do on thier own.
I put your view source next to one that works and can't figure it yet, but your tag for charset = "utf-8" should not have a / end hash in it, it is always soemthing real little thing that throws things off...recheck your audio source?
I ran my file through the online markup validation service. It didn't complain about the / after utf-8 or any part of the audio coding. It doesn't like the comment before <!DOCTYPE>. The only complaint it had was about the stray end tag for </embed>, which doesn't make any sense to me.
I use FireFox. I've looked at the source code of all posters a few days ago. Some of them have the same problem as I. I'll look at each one more carefully.
Your audio works for me now, it sounds Yiddish or something, a man not speaking in English. What version FF do you have? Lets just say it has to be at least version 3.5, but they are all the way up to versoin 8 now, so maybe you should go to the Firefox website and download the latest version, your bookmarks and all will remain. I bet that is what it is, let me know.
I upgraded FF to 8, but the problem hasn't gone away. I looked at my page in IE on my friend's laptop. Image and YouTube video work. The console bar for the first audio is in the middle of the audio window, but it works. For the second audio bit, there is no gray box or console. It displays the message "Your browser is not supported," or something similar.
Thats good, it is late here but the other question, those are special charaters that need to be wrote differantly,
Sleep time here, have fun. Remeber Google is your friend.
I did convert my mp3 to ogg, and it has the extension .ogg, not .ogg.ogv as far as I can see... Ah, I didn't know that Firefox does not support playback of mp3 files in
<audio> elements, Thanks for the info. FF supports ogg, so it should play jer1.ogg, shouldn't it?
I think Alcinoe figured out the problem. Here is another site to see stuff, and I Google tags themselves with HTML5 on them (embed tag HTML5), I might catch bad for this but I do steer clear of W3C school, they have nothing to do with the real W3C. You'll know good sources when you see them, the trick for me is balancing learning with doing, what good is the reading if I'm not making something. There are good ideas in here too fish out and see, tons...
This is a great resource, but there are more like boiler plate too...
This is the real W3C,I go look up a tag there sometimes but it can get heady, not the best place for a novice, but serious students should know it is there.
Ok, I think that i got it now. Your ogg file uses the flac codex and it is not supported by firefox. It must use either the Vorbis or Theora Codex.
I put both your original file, and a file with the changed codex at the bottom of this page:
The one that I changed works in firefox, and the other one does not.
If you want to save the file, right click and hit "save audio as" It iwill add an ogv to the end of the file - this needs to be removed. I also renamed it to jer2.ogg so you either have to change the file name or change it in your code.
Thanks much! That was the problem. When I converted mp3 to ogg, I used an online converter. It didn't show any details (as far as I could see) about the codex. I just installed mp32ogg-vorbis converter and converted my mp3. My page works now. Thanks again.