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

  • Oct. 26, 2014 at 02:57
    Detailed plans to kidnap a prison officer in a bid to escape from prison on the Isle of Wight were found in the cell of a Muslim inmate, the...
    Read more»
  • Oct. 26, 2014 at 02:40
    A person has been detained by police after an incident in central Edinburgh which led to part of the city being cordoned off.
    Read more»
  • Oct. 26, 2014 at 02:34
    The ruling Botswana Democratic Party (BDP) wins the general elections for the world's largest diamond producer with 33 of the 57 seats.
    Read more»
  • Oct. 26, 2014 at 02:31
    A US nurse quarantined for Ebola after working in Sierra Leone criticises her treatment, as the US's UN envoy starts a visit to West Africa....
    Read more»
  • Oct. 26, 2014 at 01:36
    Americans debate skin colour, and other trends of the week
    Read more»
  • Oct. 26, 2014 at 01:31
    Voice of the campaign to save Madagascar's forests
    Read more»
  • Oct. 26, 2014 at 01:27
    French soldier's bedroom untouched for 100 years
    Read more»
  • Oct. 26, 2014 at 01:27
    The bedroom of a First World War soldier, killed on the battlefield almost a century ago, has been kept virtually untouched by successive ow...
    Read more»
  • Oct. 26, 2014 at 01:23
    A look back at Jose Mujica's time as president
    Read more»
  • Oct. 26, 2014 at 01:15
    Things you may not have known about being amused
    Read more»
  • Oct. 26, 2014 at 01:10
    Ed Miliband is to blame for Johann Lamont quitting as leader of the Scottish Labour Party, Alex Salmond has claimed.
    Read more»
  • Oct. 26, 2014 at 01:05
    Why the idea of a single Muslim state keeps coming back
    Read more»
  • Oct. 26, 2014 at 01:05
    What's been lurking beneath the waves in the Baltic Sea?
    Read more»
  • Oct. 26, 2014 at 01:00
    A record five million UK workers are now in low-paid jobs, a rise of 250,000 in the last year, research from a left-of-centre think tank sug...
    Read more»
  • Oct. 26, 2014 at 00:48
    Russia prepares to turn back the clocks, moving the country on to "permanent winter time" - a move which has divided opinion
    Read more»
  • Oct. 26, 2014 at 00:47
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Oct. 26, 2014 at 00:42
    Kurdish and Iraqi forces say they have gained ground from Islamic State militants in northern Iraq and near Baghdad, amid intense US-led air...
    Read more»
  • Oct. 26, 2014 at 00:40
    At least six Lebanese soldiers have died in clashes with Islamist gunmen at a historic market in the northern town of Tripoli, the army says...
    Read more»
  • Oct. 25, 2014 at 23:15
    Tens of thousands of parents in Chile march against the government's planned education bill which would phase out subsidised schools.
    Read more»
  • Oct. 25, 2014 at 22:15
    British journalist John Cantlie, who is being held captive by Islamic State militants, is shown reading a message in a new propaganda video ...
    Read more»

Recent Comments:

Pharmb740

Sep. 25, 2014 at 11:59 AM

Very nice site!

Pharmf503

Sep. 25, 2014 at 06:32 AM

Very nice site! cheap goods http://apeyixo2.com/ysyaqqs/4.html

Pharmf80

Sep. 23, 2014 at 06:22 PM

Very nice site!

Pharmf581

Sep. 23, 2014 at 06:22 PM

Very nice site! cheap goods http://aieopxy2.com/osovrrv/4.html

Pharmg443

Sep. 23, 2014 at 06:21 PM

Very nice site! cheap goods

Archives:

Meet me on facebook: