HTML5 gör allting nytt

28 Maj 2009 Utveckling

Det var länge sedan nu vi fick en ny version av HTML. När jag började jobba 2000 hårdbevakade vi alla utvecklingen av HTML men sedan dess har det stannat av. Inte mycket har hänt i specarna. Lite beroende på att vi har haft fullt upp med att få fungerande webbläsare som tolkar CSS rätt.

Men det är nära nu. HTML5 ligger runt knuten och i senaste versionen av Safari kan du faktiskt testa detta. En efterlängtad förändring kommer att vara video-taggen som gör att vi skall kunna klara oss utan flash för visning av filmer. Vilket bland annat YouTube demonstrerar på den här sidan:

http://www.youtube.com/html5

Om du kör en HTML5-kompatibel webbläsare kan du titta på filmerna utan att använda flash. Det borde kunna öka såväl prestanda som videokvalitet om man slipper gå genom flash för att visa rörlig video för massorna. Jag är lite osäker på vilka filformat som stöds men koden blir i alla fall mycket vackrare. YouTubes videospelare ser numera ut så här:

HTML-kod för videospelaren

<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
	<div class="video-fallback">
		<br>You must have an HTML5 capable browser.
	</div>
</video>
<div class="controls">
	<button class="play-button"></button>
	<div class="progress-bar">
		<div class="progress-list">
			<progress class="load-progress" value="0" style="width: 0%;"></progress>
			<progress class="play-progress" value="0" style="width: 0%;"></progress>
			<!-- I do not like using a transparent gif, but have not figured out how to prevent the image from dragging - czacharias -->
			<a href="#" class="scrubber-button" style="left: 0%;"><img src="/demo/transp.gif" width="16" height="16"></a>
		</div>
		<span class="progress-text"><time class="current-time">00:00</time> / <time class="duration-time">00:00</time></span>
	</div>
	<button class="volume-button" value="max"><div class="volume-panel"><div class="volume-channel"><a href="#" class="volume-slider" style="top: 0%;"><img src="/demo/transp.gif" width="20" height="10"></a></div></div></button>
	<button class="hd-button" value="on"></button>
	<button class="fullscreen-button"></button>
	<button class="menu-button"></button>
</div>

För en djupdykning i vad du kan göra med HTML5 rekommenderar jag den här filmen. 1.5 timme lång och innehåller gott med exempel på hur man gör. Riktigt bra faktiskt.

Länken till exemplen han går igenom i filmen.
http://www.whatwg.org/demos/