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

  • Nov. 23, 2014 at 21:25
    Polls close after Tunisia's first presidential election since the Arab Spring, with two frontrunners claiming a narrow victory with a run-of...
    Read more»
  • Nov. 23, 2014 at 20:59
    Band Aid 30's Do They Know It's Christmas? debuts at number one in the UK singles chart.
    Read more»
  • Nov. 23, 2014 at 20:56
    Foreign ministers from several countries try to reach a deal on Iran's nuclear programme, amid a possible extension to Monday's deadline.
    Read more»
  • Nov. 23, 2014 at 20:40
    A newborn baby is found abandoned in a drain in Sydney, Australia, by passing cyclists, police say.
    Read more»
  • Nov. 23, 2014 at 20:33
    British-Iranian Ghoncheh Ghavami, who was detained after attempting to watch a men's volleyball match in Iran, is freed on bail, her family ...
    Read more»
  • Nov. 23, 2014 at 20:29
    The Kenyan military has killed more than 100 al-Shabab militants linked to a deadly attack on a bus, Kenya's deputy president says.
    Read more»
  • Nov. 23, 2014 at 20:24
    A London-bound British Airways plane makes a second unscheduled landing at Shannon Airport within three days.
    Read more»
  • Nov. 23, 2014 at 19:32
    Computer security firm Symantec discovers what it says is one of the most sophisticated pieces of malicious software ever seen.
    Read more»
  • Nov. 23, 2014 at 18:17
    England women are comprehensively beaten by clinical Germany in front of a record 45,619 Wembley crowd.
    Read more»
  • Nov. 23, 2014 at 17:58
    Charing Cross station in central London was closed for about two hours following a fire on a train.
    Read more»
  • Nov. 23, 2014 at 17:43
    Britain's Lewis Hamilton clinches his second drivers' world championship with a comfortable victory in the season-ending Abu Dhabi Grand Pri...
    Read more»
  • Nov. 23, 2014 at 17:37
    Tunisians are voting in the country's first presidential election since the 2011 "Arab Spring"
    Read more»
  • Nov. 23, 2014 at 17:30
    EU migration has "blown off course" the UK's target to cut net migration to the tens of thousands, the home secretary says.
    Read more»
  • Nov. 23, 2014 at 17:22
    A suicide bomber in east Afghanistan kills at least 45 people at a volleyball match, as Afghan MPs approve security deals with Nato and the ...
    Read more»
  • Nov. 23, 2014 at 17:14
    A law forcing communications firms to keep details that could help identify criminals using the internet is being planned by the home secret...
    Read more»
  • Nov. 23, 2014 at 16:53
    Crystal Palace score two late goals as they win 3-1 against Liverpool, who suffer their third successive league defeat.
    Read more»
  • Nov. 23, 2014 at 16:45
    Debris from the Malaysian Airlines Flight MH17 leaves rebel-held areas near the crash site heading for the government-controlled city of Kha...
    Read more»
  • Nov. 23, 2014 at 16:04
    Workers at a tea plantation in eastern India beat and stab the owner to death in a row over pay arrears.
    Read more»
  • Nov. 23, 2014 at 15:25
    Australia beat South Africa by two wickets to win the one-day international series 4-1 and go top of the world rankings.
    Read more»
  • Nov. 23, 2014 at 15:06
    Four or five terror plots have been stopped this year, compared with an average one a year in recent years, Britain's most senior police off...
    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: