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

  • Apr. 17, 2014 at 12:08
    Bad weather, murky water and strong currents are hampering the search for survivors of a stricken South Korean ferry, from which almost 300 ...
    Read more»
  • Apr. 17, 2014 at 11:59
    A lorry driver is arrested following a five-vehicle pile up on the M26 in Kent in which two people died and seven others were injured.
    Read more»
  • Apr. 17, 2014 at 11:58
    Three people are killed in a raid on a base in eastern Ukraine, the country's interior minister says, as the US, Russia, the EU and Ukraine ...
    Read more»
  • Apr. 17, 2014 at 11:56
    The Co-operative Group has announced losses of £2.5bn for 2013, marking the worst results in the group's 150-year history.
    Read more»
  • Apr. 17, 2014 at 11:35
    Artists' brains are structurally different to non-artists in areas relating to fine motor movements and visual imagery, a study finds.
    Read more»
  • Apr. 17, 2014 at 11:35
    An Australian navy captain is removed from his command and another disciplined for violating Indonesia's waters on asylum patrol duties.
    Read more»
  • Apr. 17, 2014 at 11:26
    Retirees could be told how long they are likely to live after stopping work, says pensions minister Steve Webb.
    Read more»
  • Apr. 17, 2014 at 11:12
    The former chairman of Anglo Irish bank has been found not guilty of illegally supporting the bank's share price, the jury continues to deli...
    Read more»
  • Apr. 17, 2014 at 11:00
    The BBC obtains a letter sent by Cardiff City that says the defeat by Crystal Palace in early April should not stand.
    Read more»
  • Apr. 17, 2014 at 10:57
    Claims that X-Men director Bryan Singer sexually abused a teenager in 1999 are dismissed as "completely without merit" by the film-maker's l...
    Read more»
  • Apr. 17, 2014 at 10:45
    The tests carried out by a forensic expert for Oscar Pistorius' murder trial are being rigorously challenged by the state prosecutor in Sout...
    Read more»
  • Apr. 17, 2014 at 10:43
    AC/DC confirm they will continue making music, following news guitarist and founder member Malcolm Young is taking a break from the band due...
    Read more»
  • Apr. 17, 2014 at 10:42
    Polls open in Algeria where 77-year-old President Abdelaziz Bouteflika, who suffered a stroke last year, is seeking a fourth term in office....
    Read more»
  • Apr. 17, 2014 at 10:31
    The Duke and Duchess of Cambridge meet families whose homes were destroyed by bushfires that ravaged parts of Australia last year, as they t...
    Read more»
  • Apr. 17, 2014 at 10:12
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Apr. 17, 2014 at 09:49
    The BBC's new China editor on what's changed since she last lived there
    Read more»
  • Apr. 17, 2014 at 09:37
    Indians are voting in the biggest day of the general election, pitting the ruling Congress party against the main opposition BJP.
    Read more»
  • Apr. 17, 2014 at 09:13
    French spirits firm Remy Cointreau says operating profits will fall by up to 40% after a crackdown by China on extravagant spending hits sal...
    Read more»
  • Apr. 17, 2014 at 09:01
    Shares in Google fall 5% despite reporting first-quarter profit of $3.45bn in response to worries over future income from advertising.
    Read more»
  • Apr. 17, 2014 at 08:56
    Mystery surrounds the fate of more than 100 teenage girls abducted from a school in the remote north-east of Nigeria by suspected Islamist m...
    Read more»

Recent Comments:

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»

Cheap online prescription glasses

Jun. 27, 2012 at 03:47 PM

I was suggested this blog by my cousin. I am not sure whether this post is
written by him as nobody else know such detailed about my difficulty.<... Read more»

Emmanuel

Jun. 23, 2012 at 04:02 PM

This article is about the awesome HTML 5 video feature which takes time for web developers to build up web video portals, gjust like does youtube. Wit... Read more»

Oil water separators

Jun. 21, 2012 at 12:37 PM

For the reason that the admin of this website is working,
no hesitation very rapidly it will be renowned, due
to its quality contents.

Archives:

Meet me on facebook: