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

  • Sep. 02, 2014 at 20:35
    More than 30 teenagers held at a juvenile detention centre in Tennessee escape by crawling through a fence and 17 are still being sought.
    Read more»
  • Sep. 02, 2014 at 20:31
    An Islamic State video purporting to show the beheading of Steven Sotloff, a US journalist abducted by the group, is released.
    Read more»
  • Sep. 02, 2014 at 20:21
    UK prosecutors withdraw the arrest warrant that enabled Spanish police to hold the parents who took their ill son from a British hospital.
    Read more»
  • Sep. 02, 2014 at 20:16
    Neuroscientists discover that primate brains show consistent differences according social status
    Read more»
  • Sep. 02, 2014 at 20:07
    How the EU's 'peace project' can work in a time of war
    Read more»
  • Sep. 02, 2014 at 20:00
    National Grid is seeking additional electricity supplies for winter after unexpected plant shutdowns have raised fears of potential shortage...
    Read more»
  • Sep. 02, 2014 at 19:48
    Nato must back words with actions to reassure countries bordering on Russia, the EU's new foreign affairs chief says.
    Read more»
  • Sep. 02, 2014 at 19:42
    South Yorkshire Police are accused of "sheer incompetence" by MPs in the way they dealt with the BBC over a search of Sir Cliff Richard's ho...
    Read more»
  • Sep. 02, 2014 at 19:38
    The Rosetta probe is about to begin the manoeuvres that will take it properly into orbit around Comet 67P/Churyumov-Gerasimenko.
    Read more»
  • Sep. 02, 2014 at 19:35
    Thousands have signed an open letter demanding change after a female video blogger received death threats.
    Read more»
  • Sep. 02, 2014 at 19:34
    It is understood that a young woman from Glasgow has travelled to Syria and has been promoting terrorism back home via her Twitter account.
    Read more»
  • Sep. 02, 2014 at 19:26
    A man is found guilty of bombarding a Labour MP with abusive messages on Twitter after she supported a feminist campaign.
    Read more»
  • Sep. 02, 2014 at 18:46
    A potential vaccine for Ebola is being tested in the US, with the first stage looking at how the immune system of 20 volunteers will respond...
    Read more»
  • Sep. 02, 2014 at 18:46
    The US military carries out air strikes in Somalia, reportedly targeting the leader of militant group al-Shabab, though it is unclear if he ...
    Read more»
  • Sep. 02, 2014 at 18:41
    Canadian pop star Justin Bieber is charged with assault and dangerous driving after crashing his quad bike into a minivan.
    Read more»
  • Sep. 02, 2014 at 18:35
    The number of people who have fled the fighting in Ukraine has doubled in weeks, and the UN says more than a million have now been displaced...
    Read more»
  • Sep. 02, 2014 at 18:32
    Actress Julie Gayet, linked to President Hollande, wins a privacy case against a photographer who snapped her in her car, which French law d...
    Read more»
  • Sep. 02, 2014 at 18:26
    Twelve new victims have come forward since a report found at least 1,400 children were abused in Rotherham, South Yorkshire's chief constabl...
    Read more»
  • Sep. 02, 2014 at 17:52
    A global military intervention is needed to curb the largest ever Ebola outbreak, according to the medical charity Medecins Sans Frontieres....
    Read more»
  • Sep. 02, 2014 at 17:45
    India send England to a humiliating nine-wicket defeat to win the fourth one-day international at Edgbaston and the series 3-0.
    Read more»

Recent Comments:

Ehcjntublr

Jun. 11, 2014 at 06:06 PM

leebvfnnbovfmoebzjsbhjkf, http://www.pykbyrhrlo.com/ spdwthctlr

Natural hair care products

May. 27, 2014 at 09:05 AM

These are really great ideas in on the topic of blogging. You have touched some pleasant things here. Any way keep up wrinting.

Remedies for piles

May. 18, 2014 at 05:44 PM

Thanks for finally writing about > %blog_title% < Loved it!

Website

Mar. 25, 2014 at 08:19 PM

There are books, home study courses, workshops and other means of information, to gain the knowledge required to become the alpha leader. If you want ... Read more»

Titia

Feb. 15, 2014 at 01:48 AM

buy car insurance online prozac 40mg no rx best deals on vigra and cialis website auto insurance quoye www.evansvillecommunitytheatre.com ... Read more»

Archives:

Meet me on facebook: