Co je HTML5?

• Specifikace vznikající od r. 2004
• Výrobci prohlížečů (WHATWG) a W3C
  
• Nástupce HTML a XHTML specifikací

Co obsahuje?

• Řadu novinek (dlouho žádaných)
• Standardizace zavedených proprietárních řešení
• Zvýšení interoperability (např. HTML5 parser)

Novinky HTML5

• Rozšířené formuláře
• Offline webové aplikace
• Data storage (kde cookies nestačí)
• Lepší sémantika
• Komunikace mezi doménami
• Bezpečný iframe
• Pracovní vlákna
• Peer-to-peer
• Značky audio, video, canvas

Proč?

• Video i audio se staly regulérním obsahem webu
• Je zapotřebí standard (způsob vkládání i formát)

Ukázka videa 1

<embed type="application/x-shockwave-flash"
src="/static/cz/shared/app/MediaCenter.swf"
quality="high"
wmode="transparent"
allowfullscreen="true"
flashvars="media_id=431380&bit=1225473403624233743826
&color=#000000&autostart=true&config_file_append="
width="440"
height="288">

Ukázka videa 2

<!--[if !IE]>-->
<object type="application/x-ms-wmp"
width="320" height="305">
  <param name="src" value="/services/playlist.asx">
  <param name="autostart" value="1" id="autoStart">
<!--<![endif]-->
  <param name="mute" value="0">
  <param name="autostart" value="1" id="autoStart2">
  <param name="autosize" value="0">
  <param name="stretchtofit" value="0">
  <param name="uimode" value="full">
</object>

Šlo

<video src="soubor.ogg"></video>

Fallback content

<video src="soubor.ogg">
  You can
  <a href="soubor.ogg">
    download video
  </a>
</video>

Atributy videa

<video src="soubor.ogg"
  controls
  autoplay
  poster="picture.gif"
>

Ovládání JavaScriptem

<video src="soubor.ogg"
  onclick="if (this.paused)
    this.play();
  else
    this.pause()"
>

<audio src="sound.ogg"></audio>

var skladba = new Audio("sound.ogg");
skladba.play();

<canvas></canvas>

<canvas>
  <img href="obrazek.png" alt="...desc...">
</canvas>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 20, 20);