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:
   <div id="header"></div>
   <div id="nav"></div>
   <div id="content">
          <div id="article1"></div>
          <div id="article2"></div>
          <div id="article3"></div>
    <div id="footer"></div>

will change in HTML5 as follows:
   <section id="content">

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



Latest News

  • Dec. 18, 2014 at 19:00
    Liverpool striker Mario Balotelli gets a one-match ban and £25,000 fine from the FA as punishment for his Super Mario tweet.
    Read more»
  • Dec. 18, 2014 at 18:58
    The UN General Assembly calls for North Korea to be referred to the International Criminal Court to face charges of crimes against humanity....
    Read more»
  • Dec. 18, 2014 at 18:52
    One of the UK's most wanted fugitives is arrested while attempting to return to Britain in a light aircraft.
    Read more»
  • Dec. 18, 2014 at 18:47
    EU leaders begin a Brussels summit focusing on an ambitious investment plan for Europe and the bloc's strained ties with Russia.
    Read more»
  • Dec. 18, 2014 at 18:05
    British Airways owner IAG says that Irish carrier Aer Lingus has rejected its takeover offer.
    Read more»
  • Dec. 18, 2014 at 18:04
    Poor treatment of workers in the Chinese factories which make Apple products is discovered by an undercover BBC Panorama investigation.
    Read more»
  • Dec. 18, 2014 at 18:03
    Kenyan MPs trade blows and the deputy speaker has water thrown on her during a chaotic parliamentary session which approves changes to a tou...
    Read more»
  • Dec. 18, 2014 at 18:03
    Renowned Italian film composer Ennio Morricone tells the BBC's Will Gompertz that he regrets turning down the chance to compose music for Cl...
    Read more»
  • Dec. 18, 2014 at 17:39
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Dec. 18, 2014 at 17:33
    Opponents of President Barack Obama's new Cuba policy threaten to block his efforts to restore diplomatic relations after 50 years of hostil...
    Read more»
  • Dec. 18, 2014 at 17:22
    Sony confirms it has no plans to release the film comedy about North Korea internationally, in any form, following threats from hackers.
    Read more»
  • Dec. 18, 2014 at 17:16
    A New Zealander and two Burmese men plead not guilty to charges of insulting Buddhism with a flyer for a bar event in Myanmar.
    Read more»
  • Dec. 18, 2014 at 17:10
    Detectives are investigating three alleged murders as part of an inquiry into historical child abuse involving politicians and establishment...
    Read more»
  • Dec. 18, 2014 at 17:04
    Switzerland's National Bank is to impose a negative interest rate of minus 0.25% on large deposits - but what are negative rates, and why do...
    Read more»
  • Dec. 18, 2014 at 16:58
    Militants storm a remote village in north-eastern Nigeria, killing at least 33 people and kidnapping at least 100, a survivor tells the BBC....
    Read more»
  • Dec. 18, 2014 at 16:50
    English councils will face an average cut of 1.8% in their overall spending power, the government says.
    Read more»
  • Dec. 18, 2014 at 16:42
    US authorities have arrested an American in Uganda for allegedly leading a large international counterfeiting ring.
    Read more»
  • Dec. 18, 2014 at 16:33
    Fewer than half the target number of badgers were killed in this year's cull in Gloucestershire, Defra announces.
    Read more»
  • Dec. 18, 2014 at 16:24
    Populations of most of Britain's bat species are stable or increasing following previous years of decline, report says.
    Read more»
  • Dec. 18, 2014 at 16:09
    Has the real war on terror finally started in Pakistan?
    Read more»

Recent Comments:


Sep. 25, 2014 at 11:59 AM

Very nice site!


Sep. 25, 2014 at 06:32 AM

Very nice site! cheap goods


Sep. 23, 2014 at 06:22 PM

Very nice site!


Sep. 23, 2014 at 06:22 PM

Very nice site! cheap goods


Sep. 23, 2014 at 06:21 PM

Very nice site! cheap goods


Meet me on facebook: