Playing video and audio with HTML5

by , Jul. 23, 2010 at 07:39 PM

Scripts: html5

Playing video and audio on the web has been made easy with the new HTML5.
The upcoming of HTML5 promises much in the webdesigning. To play an audio file or a video file on your html file is made very simple with only the element <video> or <audio>, and of course in combination with some of their useful attributes like autobuffer, autoplay, controls ....
Although the HTML5 is still in draft at the W3C. You can still use it and editing your HTML files in HTML5 cause some browsers's new version like Firefox 3.5, ... has introduced HTML5 in their browsers except the IE8.  You have however to manually code in HTML5 because
as long as it is still in the draft, no HTML editor has implement it yet except TopStyle 4 of Mozilla labs. But, soon it will be standard and will boost the work of the webdesigner.
Anyway there are out there on the internet enough documentations about HTML5 and its tags.
You ougth to know HTML5 will drastically improve on the structuring the html file by sectioning the file.
The strucure the document in XHTML like:
<body>
   <div id="header"></div>
   <div id="nav"></div>
   <div id="content">
          <div id="article1"></div>
          <div id="article2"></div>
          <div id="article3"></div>
    </div>
    <div id="footer"></div>
</body>

will change in HTML5 as follows:
<body>
   <header>
   <nav>
   <section id="content">
        <article1>
        <article2>
        <article3>
   <footer>
</body>

But in this topic, i like to share with you how you can too use the video tag of this great tool of designing your websites.
Note you don't have to embed third part objects like Flash, Applet,... in order to play your video or audio.

For this example, i made an movie my mobile phone and upload it to my server. Then i can play it directly on the browser without further
editing with Flash,... So simple is that!
But all the browsers are not yet implement HTML5. For example Firefox 3.5 and Opera 10.50 can play .OGG or .OGV, open format voor video,
Internet explorer 8 does not implement HTML5, the up-coming Internet Explorer 9 is well promising to implement it and the video format it will play is MP4.
Google Chrome has completely implemented HTML5 and plays .OGG, .MP4, .WebM video formats.
Safari plays .MP4 video's.
Here is the code of the HTML5 I edit to play my muvee on the browser.
See, the structure of HTML5 is simple:

  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>My HTML5 Video</title>
  4. <style type="text/css">
  5. .cadre{ padding: 10px;
  6. float: left;
  7. width :400px;
  8. border:1px solid #ddd;
  9. background-color: #efefef;
  10. -moz-border-radius:10px;
  11. -webkit-border-radius:10px;
  12. }
  13. video{
  14. float: left;
  15. width :400px;
  16. }
  17. </style>
  18. </head>
  19. <div class="cadre">
  20. <video controls autoplay poster='media/hizkia.jpg'>
  21. <source src='media/test.ogg' type='video/ogg'>
  22. <source src='media/test.mp4' type='video/mp4'>
  23. Sorry your browser doesn't support HTML5 yet!
  24. </video>
  25. </div>
  26. </body>
  27. </html>

This is a good news for webdesigners that HTML5 can play video and audio on the web. It works also in RSS readers (no need JavaScript), on the iPhone / iPad (don’t support Flash) and on many, many browsers and platforms.
And if you want to watch the demo of this code. Click on this link demostration.
Have fun.

Available Comments :

Your Attention! Please do not post message with spam on this blog. We try to be cool to each other and post relevant comments and relating to the appropriated topic or entry. Let's try to get a nice conversation over here.

Leave a comment

Required!
Required!

Required!
Required!

Latest News

  • Jan. 25, 2015 at 19:11
    At least 16 people are killed in Egypt during street protests marking the fourth anniversary of the start of the 2011 uprising.
    Read more»
  • Jan. 25, 2015 at 18:58
    Defending champions Arsenal reach the FA Cup fifth round but are forced to hang on for victory against Brighton.
    Read more»
  • Jan. 25, 2015 at 18:57
    Exit polls suggest clear victory for anti-austerity Syriza party in tightly fought Greek general election.
    Read more»
  • Jan. 25, 2015 at 18:47
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Jan. 25, 2015 at 17:56
    Irish airline Aer Lingus is set to approve a takeover bid by British Airways owner IAG, the BBC understands.
    Read more»
  • Jan. 25, 2015 at 17:36
    Japan's Kei Nishikori says the Australian Open feels like "home" ahead of his fourth round match against David Ferrer.
    Read more»
  • Jan. 25, 2015 at 17:24
    A multi-faith rally, partly inspired by comments made on US TV describing Birmingham as a 'no-go area' for non-Muslims, is held.
    Read more»
  • Jan. 25, 2015 at 17:16
    A journalist believed to have been the first to report the death of Argentine prosecutor Alberto Nisman says he has fled the country, fearin...
    Read more»
  • Jan. 25, 2015 at 17:03
    India and the US announce a breakthrough on a deal for supplying civilian nuclear technology, on the first day of President Barack Obama's v...
    Read more»
  • Jan. 25, 2015 at 17:01
    The Conservatives are close to agreeing to new plans for pre-election television debates, the party's chairman Grant Shapps says.
    Read more»
  • Jan. 25, 2015 at 16:49
    Fighters from the Islamist militant group Boko Haram launch an attack on the key city of Maiduguri in north-eastern Nigeria.
    Read more»
  • Jan. 25, 2015 at 16:45
    Ukrainian President Petro Poroshenko vows to "calm" fighting with pro-Russia rebels, a day after 30 people were killed in Mariupol.
    Read more»
  • Jan. 25, 2015 at 16:28
    Impeachment of ex-PM Yingluck Shinawatra is a major step
    Read more»
  • Jan. 25, 2015 at 16:28
    A cruise ship with more than 1,000 people on board was left temporarily without power off the coast of Morocco after a fire in the engine ro...
    Read more»
  • Jan. 25, 2015 at 16:25
    An MEP who has defected to the Conservatives had "reached the end of the road" with UKIP, party leader Nigel Farage says.
    Read more»
  • Jan. 25, 2015 at 16:21
    South Africa defender Thulani Hlatshwayo is ruled out of Tuesday's Africa Cup of Nations match against Ghana.
    Read more»
  • Jan. 25, 2015 at 16:01
    The World Health Organization sets out plans for reform, admitting it was too slow to respond to the "horrific" Ebola outbreak in West Afric...
    Read more»
  • Jan. 25, 2015 at 14:59
    Andy Murray wins a gruelling late-night contest with Grigor Dimitrov to reach the Australian Open quarter-finals.
    Read more»
  • Jan. 25, 2015 at 14:01
    Bradford City's boss tells how he refused Jose Mourinho's handshake before full-time in the FA Cup win over Chelsea.
    Read more»
  • Jan. 25, 2015 at 13:54
    Joe Franklin, who was a New York TV host for 43 years and is credited by some as having invented the talk show format, dies at the age of 88...
    Read more»

Recent Comments:

Emmanuel Ndayiragije

May. 05, 2011 at 04:30 PM

Salut Joannes,
Quand j'ai programmé ce système, je l'ai codé supportant l'englais seulement. Bientôt, je vais l'étendre pour pouvoir supporte... Read more»

Joannes

Apr. 27, 2011 at 02:16 PM

Why don't you write in french?

Administrator

Nov. 12, 2010 at 11:56 AM

The inaccuracy of the Geolocation Api of html5 may be it use the IP from your internet provider or ur pc has no GPS tools installed on it. Geolocation... Read more»

Cr.frozen

Nov. 12, 2010 at 11:33 AM

Html5 geolocation is not accurate?
How come?

Amo

Oct. 20, 2010 at 11:36 PM

HTML5 is great stuff

Archives:

Meet me on facebook: