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

  • Aug. 28, 2014 at 07:13
    He's best known for his portrayal as the cool and commanding Don Draper in Mad Men - but actor Jon Hamm is keen to shake off his bad boy ima...
    Read more»
  • Aug. 28, 2014 at 07:11
    The prime minister is to tell business leaders that the UK is "an economy of opportunity" which supports one million Scottish jobs.
    Read more»
  • Aug. 28, 2014 at 06:59
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Aug. 28, 2014 at 06:55
    US police say Equatorial Guinea's ambassador is suspected of beating a girl with a chair leg but won't be arrested because he has diplomatic...
    Read more»
  • Aug. 28, 2014 at 06:52
    Indian PM Narendra Modi is due to launch a plan to provide a bank account for every household, in a landmark initiative to help the poor.
    Read more»
  • Aug. 28, 2014 at 06:24
    Australia's national flag carrier Qantas reports a net loss of A$2.8bn for the year ending in June - the airline's biggest ever financial lo...
    Read more»
  • Aug. 28, 2014 at 04:36
    A top US public health official says the Ebola outbreak is set to get worse before it gets better, as West African health ministers meet in ...
    Read more»
  • Aug. 28, 2014 at 04:36
    The Jewish Board of Deputies and Muslim Council of Britain issue an unprecedented joint statement calling for peace and condemning prejudice...
    Read more»
  • Aug. 28, 2014 at 04:25
    Turkish President-elect Recep Tayyip Erdogan is due to be officially sworn in after winning the country's first ever popular vote for head o...
    Read more»
  • Aug. 28, 2014 at 04:23
    Germany demands an explanation from Russia's Vladimir Putin amid reports that Russian troops launched an incursion into south-east Ukraine.
    Read more»
  • Aug. 28, 2014 at 04:21
    A group of young American football players and their parents have sued Fifa and US football groups over the risks from concussions.
    Read more»
  • Aug. 28, 2014 at 03:22
    How people react to Gaza on social media
    Read more»
  • Aug. 28, 2014 at 03:08
    Shaun Wright resigns from the Labour Party but refuses to quit his South Yorkshire police and crime commissioner role following a damning re...
    Read more»
  • Aug. 28, 2014 at 03:07
    Did Sherlock's creator predict the Channel Tunnel?
    Read more»
  • Aug. 28, 2014 at 02:54
    A sailor in Chile, Mauricio Ruiz, becomes the first serving member of the Chilean armed forces to announce he is gay, and gets full backing ...
    Read more»
  • Aug. 28, 2014 at 02:43
    The UK is "deeply elitist" according to a new analysis of the backgrounds of more than 4,000 business, political, media and public sector le...
    Read more»
  • Aug. 28, 2014 at 02:36
    Three-quarters of cancer patients who are depressed are not getting the psychological therapy they need, researchers say.
    Read more»
  • Aug. 28, 2014 at 01:39
    Why guns are a part of American childhood
    Read more»
  • Aug. 28, 2014 at 01:23
    Waves as high as 20ft (6m) in southern California have damaged waterfront homes, knocked out pier pilings and attracted scores of surfers.
    Read more»
  • Aug. 28, 2014 at 01:18
    David Grossman reports from the Isle of Wight, on the "white space" which could help remote areas access fast broadband.
    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: