HTML5 Features

Paul Irish
Google Chrome, Developer Programs Engineer

HTML5 Gamejam
October 9th, 2010

HTML5: Where are we now?
HTML5 - Making the Web More Powerful
Going Multimedia with Audio and Video

Audio

<audio src="sound.ogg" controls></audio>
<script>
  document.getElementById("audio").muted=false;
</script>

Video

<video src='movie.webm' autoplay controls ></video>
<script>
  document.getElementById("video").play();
</script>
Video as a First Class Element

Media Element API test page
Storing Data on the Client
var loadedCount = parseInt(localStorage['loadedCount'] || '0') + 1;
localStorage['loadedCount'] = loadedCount;
document.getElementById('displayLoadedCount').innerHTML = loadedCount;

You've viewed this presentation on this computer X times.

Other Storage Options

Web SQL DB:

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM author", [], successCallback, errorCallback);
});

Other:


Indexed DB

File API

App Cache
Working Hard with Worker Threads
main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); };

extra_work.js:
  postMessage(some_data);

Paint here

Difference

Dragging & Dropping
var elem = document.getElementById('dragElem');
elem.addEventListener('dragstart', ..., false);
elem.addEventListener('dragend', ..., false);

var target = document.getElementById('dragTarget');
target.addEventListener('dragenter', ..., false);
target.addEventListener('dragleave', ..., false);
target.addEventListener('dragover', ..., false);
target.addEventListener('drop', ..., false);
Drop here
No, drop here
File API
Look Who's Calling - Notifications
if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, text).show();
} else {
  window.webkitNotifications.requestPermission();
}

This presentation currently X permission to display notifications.

Coding on the Canvas
var canvas = document.getElementById("canvas2d");
var context = canvas.getContext("2d");
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.arc(x, y, r, Math.PI * 1/2, Math.PI * 3/2, false);
var id = context.getImageData(0, 0, width, height).data;
var r = id[0], g = id[1], b = id[2], a = id[3] / 255;
context.lineWidth = 20;
context.lineCap = "round";
context.strokeStyle = "rgba(255, 0, 0, 0.7)";
context.stroke();
Drawing on the Canvas

jQuery Inversion Plugin
Canvas animation
Demo: Canvas in action
Demo: Canvas in action
More HTML5 Goodies to Consider
Good great AMAZING resources
Let's hack!