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

  • Mar. 03, 2015 at 03:59
    Australia is to more than double its contingent of troops training local forces in Iraq, Prime Minister Tony Abbott says.
    Read more»
  • Mar. 03, 2015 at 03:52
    Barack Obama says Iran should freeze nuclear activity for 10 years, as Israel's prime minister is set to address US Congress on the issue.
    Read more»
  • Mar. 03, 2015 at 03:50
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Mar. 03, 2015 at 03:01
    Shares in Asia were mostly higher on Monday, following the US, where both the Dow Jones and the S&P 500 closed at all-time highs.
    Read more»
  • Mar. 03, 2015 at 02:59
    The Sikh boy called a 'terrorist' by his classmates
    Read more»
  • Mar. 03, 2015 at 02:18
    The founder member of al-Qaeda who worked for MI6
    Read more»
  • Mar. 03, 2015 at 02:15
    Delhi bus rapist says victim shouldn't have fought back
    Read more»
  • Mar. 03, 2015 at 02:06
    Venezuela orders the United States to cut more than 80 staff from its diplomatic mission in the next two weeks.
    Read more»
  • Mar. 03, 2015 at 02:06
    Failures at a maternity unit where a number of newborn babies and mothers died are expected to be exposed later.
    Read more»
  • Mar. 03, 2015 at 01:58
    "Attractive" jihadist fighters can be "eye candy" to lure in British Muslim girls, a woman who was radicalised online tells BBC Newsnight.
    Read more»
  • Mar. 03, 2015 at 01:26
    Former Tottenham, Derby, Hearts and Scotland midfielder Dave Mackay dies, aged 80.
    Read more»
  • Mar. 03, 2015 at 01:22
    Anna Durytska, the Ukrainian girlfriend of murdered Russian opposition politician Boris Nemtsov, is flying home after being questioned by po...
    Read more»
  • Mar. 03, 2015 at 01:08
    Drinking a few cups of coffee a day may help people avoid clogged arteries - a known risk factor for heart disease - South Korean researcher...
    Read more»
  • Mar. 03, 2015 at 00:52
    More than a dozen artefacts have been stolen from a Chinese museum near Paris, including a replica of the King of Siam's crown that was give...
    Read more»
  • Mar. 03, 2015 at 00:21
    The Los Angeles police chief says a homeless man shot dead by police had reached for an officer's weapon before being killed.
    Read more»
  • Mar. 02, 2015 at 23:30
    There is "no hiding" from the failures of authorities in Oxfordshire where young girls were groomed, a retired detective tells Newsnight.
    Read more»
  • Mar. 02, 2015 at 23:29
    The Football Association is planning to enter men's and women's Great Britain teams at the Rio 2016 Olympic Games.
    Read more»
  • Mar. 02, 2015 at 23:03
    Hundreds of parents are arrested in north-west Pakistan for refusing to allow their children to be vaccinated against polio.
    Read more»
  • Mar. 02, 2015 at 22:39
    As Nasa's Dawn satellite prepares to enter into orbit around the dwarf planet Ceres, scientists say they are excited to learn more about the...
    Read more»
  • Mar. 02, 2015 at 22:28
    Dating app Tinder announces it will charge the over-28s nearly four times as much for its premium features as it does younger users in the U...
    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: