Multimedia

<img src="http://example.com/image.webp" alt="Example image." />

<audio src="file.ogg">Text for browsers that do not support the audio tag.</audio>

<video src="video.ogv">Text for browsers without support for the video tag.</video>

<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>

Task Discussion

• 
  EcologicalHumanist   July 10, 2013, 5:27 p.m.

  https://ecohumanist.makes.org/thimble/image-audio-video

• 
  EcologicalHumanist   July 10, 2013, 5:26 p.m.

  It seems like it isn't enough to put the source, you have to add:

  preload="preload" controls="control"

  to the audio and video tag.  Other than that no problems.

• 
  bryanwoodsmall   July 2, 2013, 12:10 a.m.

  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

• 
  Deiren   Jan. 27, 2013, 1:59 p.m.

  Simply testing - https://thimble.webmaker.org/p/fuew

• 
  Gerardo Muñoz Asca   Jan. 23, 2013, 8:04 p.m.

  https://thimble.webmaker.org/p/fur5 ó http://descargalibre.cu.cc/Multimedia.html

  Traducción al español: http://p2p4-html5yuichi.blogspot.com/2013/01/multimedia.html

• 
  Joris Pekel   Oct. 10, 2012, 8:46 a.m.

  Does not work well in Wordpress Posted it to the HTML Pad

• 
  saravanan   Aug. 16, 2012, 9:48 a.m.

  Really tough to complete.

  Moraino page helped me.

  I tried it check out.

  http://htmlpad.org/mult2453/

• 
  al read   Aug. 16, 2012, 9:50 a.m.
  In Reply To:   saravanan   Aug. 16, 2012, 9:48 a.m.

  Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
• 
  hamilton mena quejada   June 24, 2012, 10:07 p.m.

  http://htmlpad.org/multimediahmq/

• 
  Giorgos Dimop   May 31, 2012, 1:21 p.m.

  http://htmlpad.org/multimedia-gd/

   

  I couldn't make the audio work.

  I also found that <video controls="controls"> is needed to add playback buttons and timeline.

• 
  Nick   May 6, 2012, 8:50 a.m.

  I'm starting to realize not everything is given to us in order to complete the challenge   Anyways... here is my multimedia page.  BTW i've only been making sure my ass. work with chrome so far

• 
  Pau Company   April 4, 2012, 12:11 p.m.

  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.

   

  <video>

                <source src="demo/videos/tabarca.mp4" type='video/mp4; codecs="avc1,mp4"' /> <!-- Chrome -->

  <source src="demo/videos/Tabarca_xo.ogg" type='video/ogg; codecs="theora,vorbis"'  /> <!-- Firefox 5,6,7,8 -->

  <source src="demo/videos/Tabarca.webmvp8.webm"  type='video/webm ; codecs="vp8,vorbis"' /><br/> <!-- IE 8, 9 -->

  </video>

   

  Os pongo un ejemplo, que he realizado, con un reproductor, personalizado, que soporta pantalla completa. Decir que el codigo JavaScript y el reproductor es de la empresa github.com, lo utilizo ya que es de facil implementación. Utiliza, ajax y jquery, asi como polyfilles en javascript. Darle las gracias a github.com, por liberar el codigo y hacernos la vida mas facil. Aqui va todo el codigo y el link a mi servidor para que veais el resultado

   

   

  <!DOCTYPE html>

  <html lang="es">

      <head>

          <meta charset="utf-8"/>

          <link href="player-style/css/player-styles.css" rel="stylesheet" />

  <!--[if lt IE 9]>

  <script src="http://HTML5shim.googlecode.com/svn/trunk/HTML5.js">

  </script>

  <![endif]-->

   

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

          <!-- only slider + dependencies are required -->

          <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

  <!-- END: slider -->

   

          <!-- polyfill: only needed if you want to make it cross browser -->

          <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>

          <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>

  <!-- END: polyfill -->

   

          <script src="../src/jme.js"></script>

  <!-- start polyfill (only if webshims is included) -->

          <script>

              $.webshims.polyfill('mediaelement');

          </script>

          <title>jme2</title>

      </head>

      <body>

      <div class="mediaplayer" preload="none" data-jme='{"controlbar": true}'>

  <video>

   

     <!-- aqui donde pone micarpeta/miarchivo.mp4 debereis poner el nombre de la carpeta donde se ubican vuestros videos y en¡l nombre del video en si -->

   

                <source src="micarpeta/miarchivo.mp4" type='video/mp4; codecs="avc1,mp4"' /> <!-- Chrome -->

   

  <source src="micarpeta/miarchivo.ogg" type='video/ogg; codecs="theora,vorbis"'  /> <!-- Firefox 5,6,7,8 -->

  <source src="micarpeta/miarchivo.webmvp8.webm"  type='video/webm ; codecs="vp8,vorbis"' /><br/> <!-- IE 8, 9 -->

  </video>

  </div>

  </body>

  </html>

   

   

  El Link donde podeis visualizar el resultado es:

  http://www.paucompany.es/miarroba/

   

  Si necesitais alguna ayuda, podeis contactar conmigo en info@paucompany.es

   

  Y aqui teneis el ejercicio entero acabado. Añado una pequeña mejora el 30/05/2012 al audio, una lista de reproducción, para escuchar mas de una canción. Utilizo Javascript. 

  http://paucompany.es/ejercicioshtml5/html5ejrecicio3.html

  Espero comentarios.

• 
  Mr. Plow   March 22, 2012, 12:18 p.m.

  This was a fun one to complete!

  I present Seeds and Pops and Spins.

• 
  Devinciweb   Feb. 10, 2012, 2:09 p.m.

  Here is my work for this task:

   

  http://dl.dropbox.com/u/60089935/multimediatask.html

• 
  Devinciweb   Feb. 10, 2012, 1:36 p.m.

  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>
  -->
  

  
  
• 
  Moraino   Jan. 17, 2012, 7:19 a.m.

  That was a little bit tough, but  here it is:

  http://htmlpad.org/Multimedia/

• 
  José González   Jan. 26, 2012, 10:41 a.m.
  In Reply To:   Moraino   Jan. 17, 2012, 7:19 a.m.

   

  Hi to all. I did the same test over my first page.

   

  http://htmlpad.org/kikofreakk

   

  But I can't run the audio or video tags in Explorer versions under 9.x (P.E. Internet Explorer 8). Do you know any way to run in all of the browsers (at least in the generalists).

   

  Greetings, FreaKK
• 
  Vita   Jan. 26, 2012, 1:33 p.m.
  In Reply To:   José González   Jan. 26, 2012, 10:41 a.m.

  Hello José,

  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:

  <audio controls="controls">

  <source src="file/example.ogg" type="audio/ogg">

  <source src="file/example.mp3" type="audio/mpeg">

  TU NAVEGADOR NO SOPORTA HTML5 - Estarías escuchando La Marcha Granadera, el actual Himno de España

  </audio>

  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):

  <video controls="controls">

  <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

  </video>

  Try it, I hope it will help...

  Vita

• 
  Vita   Nov. 21, 2011, 6:30 a.m.

  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 :

  http://dl.dropbox.com/u/18761433/HTML5Course/multimedia.html

• 
  Devinciweb   Feb. 6, 2012, 10:25 a.m.
  In Reply To:   Vita   Nov. 21, 2011, 6:30 a.m.

  I love the way you set up your exercises all on one dropbox page.

  Nice and inspiring!

• 
  Vita   Feb. 6, 2012, 12:23 p.m.
  In Reply To:   Devinciweb   Feb. 6, 2012, 10:25 a.m.

  Thank you! 

  It's always nice to see that your work is appreciated... 

• This comment was deleted.
• 
  joe palmer   Nov. 17, 2011, 9:48 a.m.
  In Reply To:   Anonym   Nov. 17, 2011, 12:02 a.m.

  I think it is your doctype, change it to the HTML5 doctype- 

  <!DOCTYPE html>

  also see what Alcinoe did holding cntrl than hit u key...

  In class all day, wish I could help more, anyone else?

• 
  Anonym   Nov. 17, 2011, 10:54 a.m.
  In Reply To:   joe palmer   Nov. 17, 2011, 9:48 a.m.

  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?  

• 
  joe palmer   Nov. 17, 2011, 11:15 a.m.
  In Reply To:   Anonym   Nov. 17, 2011, 10:54 a.m.

  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?
  
  Anybody????

• 
  Anonym   Nov. 17, 2011, 6:06 p.m.
  In Reply To:   joe palmer   Nov. 17, 2011, 11:15 a.m.

  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.

• 
  joe palmer   Nov. 17, 2011, 6:47 p.m.
  In Reply To:   Anonym   Nov. 17, 2011, 6:06 p.m.

  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.

• 
  Anonym   Nov. 17, 2011, 9:57 p.m.
  In Reply To:   joe palmer   Nov. 17, 2011, 6:47 p.m.

  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.

• 
  joe palmer   Nov. 17, 2011, 10:30 p.m.
  In Reply To:   Anonym   Nov. 17, 2011, 9:57 p.m.

  http://www.devx.com/projectcool/Article/20131/0/page/3

  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.

• 
  alcinoe   Nov. 17, 2011, 11:35 p.m.
  In Reply To:   Anonym   Nov. 17, 2011, 12:02 a.m.

   

  I think that you need to look at the audio files themselves. They must be named jer1.ogg and jer1.mp3. in order for them to work. Also, if your original file was mp3, you need to use a converter to make it into a ogg file (and vice versa). 

   

  I think that your ogg file is named jer1.ogg.ogv. That would actually make it look like a video file, and because it is not named properly, it can't be found. I think that this is why it is not playing in Firefox. It is fine in Chrome because Chrome looks for and finds the correctly named mp3 file. Firefox does not support mp3 so it looks for and can't find the ogg file.
• 
  Anonym   Nov. 18, 2011, 11:11 a.m.
  In Reply To:   joe palmer   Nov. 17, 2011, 10:30 p.m.

  Thank you for the link.  Today I don't have much computer time until the evening, but I'll definitly look at the link you gave me. 

  Yes, Google has been my best friend.  I'm still learning to be a good google-searcher.

• 
  Anonym   Nov. 18, 2011, 11:26 a.m.
  In Reply To:   alcinoe   Nov. 17, 2011, 11:35 p.m.

  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?  

• 
  joe palmer   Nov. 18, 2011, 12:19 p.m.
  In Reply To:   Anonym   Nov. 18, 2011, 11:11 a.m.

  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...

  http://html5gallery.com/

  This is a great resource, but there are more like boiler plate too...

  http://www.webmonkey.com/2010/02/building_web_pages_with_html_5/

  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.

  http://www.w3.org/

  Have fun!

• 
  alcinoe   Nov. 18, 2011, 12:42 p.m.
  In Reply To:   Anonym   Nov. 18, 2011, 11:26 a.m.

  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.

  http://forums.mozillazine.org/viewtopic.php?f=7&t=2268617

• 
  alcinoe   Nov. 18, 2011, 1:09 p.m.
  In Reply To:   Anonym   Nov. 17, 2011, 12:02 a.m.

  I put both your original file, and a file with the changed codex at the bottom of this page:

  http://www.alcinoe.us/HTML5/Multimedia.html

  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.

• 
  Anonym   Nov. 18, 2011, 5:52 p.m.
  In Reply To:   alcinoe   Nov. 18, 2011, 1:09 p.m.

  I saved jer2.ogg as you said, ie., right click and hit 'save sudio as,' but it doesn't have .ogg.ogv extension.  I'm not sure if I'm understanding you correctly...

• 
  Anonym   Nov. 18, 2011, 5:59 p.m.
  In Reply To:   alcinoe   Nov. 18, 2011, 12:42 p.m.

  Oh Thanks!  I just saw this message from you.

• 
  Anonym   Nov. 18, 2011, 6:21 p.m.
  In Reply To:   alcinoe   Nov. 18, 2011, 12:42 p.m.

  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.

• 
  Anonym   Nov. 18, 2011, 6:49 p.m.
  In Reply To:   joe palmer   Nov. 18, 2011, 12:19 p.m.

  Sure she did!  Thank you though for your trying to help me and for the useful links.

• 
  joe palmer   Nov. 18, 2011, 7:01 p.m.
  In Reply To:   Anonym   Nov. 18, 2011, 6:49 p.m.

  The best part is I learned new stuff too !

• 
  Anonym   Nov. 18, 2011, 7:12 p.m.
  In Reply To:   joe palmer   Nov. 17, 2011, 10:30 p.m.

  Thank you for the link to David Colhoun's page.  I think his homepage is very clean and simple.  I like it a lot

• 
  alcinoe   Nov. 18, 2011, 7:36 p.m.
  In Reply To:   Anonym   Nov. 18, 2011, 5:52 p.m.

  The original file, when I downloaded it from firefox, renamed itself with an ogg.ogv (crazy) extension - that's why I thought that it wasn't named properly at first. Now it is downloading properly as .ogg. 

• 
  Anonym   Nov. 18, 2011, 7:42 p.m.
  In Reply To:   alcinoe   Nov. 18, 2011, 7:36 p.m.

  I wanted to ask you how you thought it was the codex, but you answered my question before I got to ask.  Thank you for sharing your thought process.

• 
  alcinoe   Nov. 18, 2011, 7:47 p.m.
  In Reply To:   Anonym   Nov. 18, 2011, 6:21 p.m.

  You're welcome Demian!

• 
  Anonym   Nov. 16, 2011, 4:37 a.m.

  RE: THE <audio> TAG - controls="controls" 

  The audio console appears just for a second and it disappears, and I'm left with a grey box with 'X' in it.  Could someone tell me what may be the problem and how to fix it?  Thanks.

• 
  Anonym   Nov. 16, 2011, 4:05 a.m.

  For audio, do I need to convert mp3 to ogg in order for the audio tag to work?  That seems like a bad thing to do, because converting from one lossy format (mp3) to another (ogg) will degrade the sound quality.  Are there any other ways to add mp3 to my web?

• 
  Anonym   Nov. 16, 2011, 4:59 a.m.
  In Reply To:   Anonym   Nov. 16, 2011, 4:05 a.m.

  This doesn't look pretty but works (at least on my browser - firefox). 

  <embed src="jer1.mp3" autostart="false" volume="100">
  </embed>

• 
  alcinoe   Nov. 16, 2011, 10:10 a.m.
  In Reply To:   Anonym   Nov. 16, 2011, 4:05 a.m.

  You should include both mp3 and ogg so that it works in as many browsers as possible.

• 
  Anonym   Nov. 16, 2011, 3:34 p.m.
  In Reply To:   alcinoe   Nov. 16, 2011, 10:10 a.m.

  I did.

  Using the <audio> tag, I can't get the console.  It appears for about one second and then disappears.  Do you know how to fix it?

• 
  joe palmer   Nov. 16, 2011, 4:34 p.m.
  In Reply To:   Anonym   Nov. 16, 2011, 3:34 p.m.

  Paste your dropbox link on or something so people can see what you have :)