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

  • Sep. 20, 2014 at 07:50
    The Duke of Cambridge is to celebrate Malta's 50th anniversary on an official visit to the country, as a last-minute replacement for his pre...
    Read more»
  • Sep. 20, 2014 at 07:31
    Manchester City's Yaya Toure tells BBC's Football Focus he wants to win the Champions League for the club's fans.
    Read more»
  • Sep. 20, 2014 at 07:17
    Politicians on both sides of the independence debate are to consider the best way ahead for Scotland after voters backed remaining in the UK...
    Read more»
  • Sep. 20, 2014 at 07:04
    Some 49 Turkish hostages seized by militants in the northern Iraqi city of Mosul in June are now back in Turkey, says Prime Minister Ahmet D...
    Read more»
  • Sep. 20, 2014 at 06:36
    Watch the latest news summary from BBC World News. International news updated 24 hours a day.
    Read more»
  • Sep. 20, 2014 at 06:28
    Secret Service agents briefly evacuate part of the White House after an intruder was spotted running through the grounds.
    Read more»
  • Sep. 20, 2014 at 05:22
    Aberdeen-based Oil and gas services company Oil States announces plans to create 100 new jobs in West Lothian.
    Read more»
  • Sep. 20, 2014 at 05:02
    The Ukrainian government and pro-Russian rebels agree a memorandum on a peace plan for the conflict in the east of the country, at talks in ...
    Read more»
  • Sep. 20, 2014 at 04:21
    Police make six arrests after separating groups of rival Unionist and independence supporters in George Square in the centre of Glasgow.
    Read more»
  • Sep. 20, 2014 at 04:10
    A British couple are reported missing off the Mexican coast after Hurricane Odile hit the country last weekend.
    Read more»
  • Sep. 20, 2014 at 03:50
    An Egyptian man accused of helping to plan the 1998 bombings of US embassies in Kenya and Tanzania pleads guilty in a New York court.
    Read more»
  • Sep. 20, 2014 at 02:48
    Leading British Muslim scholars make a direct appeal to Islamic State militants to free Alan Henning, a UK hostage threatened with death.
    Read more»
  • Sep. 20, 2014 at 02:08
    The European Court for Human Rights will hear Italian ex-PM Silvio Berlusconi's appeal against a fraud conviction, his lawyer says.
    Read more»
  • Sep. 20, 2014 at 01:40
    Six Russian fighter jets are intercepted by American and Canadian planes off the coast of Alaska on Wednesday, US defence officials confirm....
    Read more»
  • Sep. 20, 2014 at 01:13
    Trends of the week in 60 seconds
    Read more»
  • Sep. 20, 2014 at 01:10
    Migrant survivors in Malta speak of horror at sea
    Read more»
  • Sep. 20, 2014 at 01:05
    Why I'm risking my life to help people with Ebola
    Read more»
  • Sep. 20, 2014 at 01:00
    The scary element that helped save the crew of Apollo 13
    Read more»
  • Sep. 20, 2014 at 00:49
    French fighter jets have launched their first air strikes against Islamic State in northern Iraq as Kurds in northern Syria flee attacks by ...
    Read more»
  • Sep. 19, 2014 at 23:36
    US President Barack Obama launches the new 'It's on Us' campaign, which aims to prevent sexual assault at American universities.
    Read more»

Recent Comments:


Sep. 19, 2014 at 07:03 PM

Very nice site!


Sep. 19, 2014 at 07:01 PM

Very nice site! [url=]cheap goods[/url]


Sep. 18, 2014 at 12:36 PM

Very nice site! [url=]cheap goods[/url]


Sep. 18, 2014 at 12:35 PM

Very nice site! cheap goods


Sep. 17, 2014 at 07:40 PM

Appreciate it for helping out, great information. ekfkbekeceac


Meet me on facebook: