Slide 1
Slide 1 text
HTML5 vs. Flash
Where Flash isn’t needed anymore
Slide 2
Slide 2 text
Remy Sharp
@rem
Sometimes does
flash-ing
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
1. video & Audio
2. Real-time
3. Graphics
Slide 9
Slide 9 text
Video killed the
radio Flash star?
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Who would jump to create
another video player?
Slide 12
Slide 12 text
IE9 & all others
supported
Slide 13
Slide 13 text
Slide 14
Slide 14 text
Video Example
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Slide 18
Slide 18 text
Slide 19
Slide 19 text
Slide 20
Slide 20 text
Slide 21
Slide 21 text
<...>
Slide 22
Slide 22 text
Download Video: High Quality "MP4" | Low Quality "OGG"
http://camendesign.com/code/video_for_everybody Video for EverybodySlide 23
Slide 23 text
Scripting
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
var video = document.getElementById('myVideo');
if (video.paused) {
video.play();
}
Slide 26
Slide 26 text
var video = document.getElementById('myVideo');
if (video.paused) {
video.play();
}
// position & asTime defined elsewhere
video.addEventListener('timeupdate', function () {
positon.innerHTML = asTime(this.currentTime);
}, false);
Slide 27
Slide 27 text
Methods: play(), pause(), canPlayType(mime)
Properties: currentTime, paused, duration,
loop, autoplay, muted, volume, etc
Events: loadedmetadata, canplay, progress,
play, pause, seeking, timeupdate, etc
Simple API
Slide 28
Slide 28 text
⾠Warning! User agents should not provide a public API to
cause videos to be shown full-screen. A script, combined with a
carefully crafted video file, could trick the user into thinking a
system-modal dialog had been shown, and prompt the user for
a password. There is also the danger of "mere" annoyance, with
pages launching full-screen videos when links are clicked or
pages navigated. Instead, user-agent specific interface features
may be provided to easily allow the user to obtain a full-screen
playback mode.
Fullscreen?
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
1. No plugins required
2.Simple API: play, pause, etc
3.Video & Audio: the same
4.HTML & CSS - no compile or
different skills required
Slide 32
Slide 32 text
1. Codecs
2.Our friend IE
Slide 33
Slide 33 text
Flash will be needed
as a backup to video
for a while yet.
Slide 34
Slide 34 text
Realtime
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
http://rem.im/collab-drawing.html
Slide 39
Slide 39 text
WebSocket
•Low latency
•Bi-directional
•No same-original rules
•Chrome, Safari, MobileSafari & Firefox
•Fallback on Flash...ironically
Slide 40
Slide 40 text
var ws = new WebSocket("ws://myserver.com/");
ws.onmessage = function (event) {
var data = JSON.parse(event.data);
};
ws.onclose = function () {};
ws.onopen = function () {};
WebSocket
Slide 41
Slide 41 text
ws.onmessage = function (event) {
var data = JSON.parse(event.data);
};
All message data lives here
Slide 42
Slide 42 text
EventSource
•Server pushed events
•Same-original rules apply
•Can fallback with JavaScript
Slide 43
Slide 43 text
var es = new EventSource("/x-service/");
es.onmessage = function (event) {
var data = JSON.parse(event.data);
};
es.onopen = function () {};
EventSource
Slide 44
Slide 44 text
Graphics
Slide 45
Slide 45 text
2D Graphics
Slide 46
Slide 46 text
Canvas
API
Slide 47
Slide 47 text
HTML5
var canvas = document.getElementsByTagName(‘canvas’)[0],
ctx = canvas.getContext(‘2d’);
2D drawing API
Slide 48
Slide 48 text
canvas.getContext(‘2d’)
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Google Analytics - Flash charts
Interactive Demo - Canvas charts
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
function canvas(w, h) {
var ctx = document.createElement('canvas').getContext('2d'),
canvas = ctx.canvas;
canvas.width = w;
canvas.height = h;
return ctx;
}
var rainbow = canvas(100, 1),
rainbowGrad = createRainbow(rainbow);
rainbow.fillStyle = rainbowGrad;
var imageData = rainbow.getImageData(0, 0, 100, 1),
pixels = imageData.data;
// loop over each pixel and create the dot image
for (var i = 0; i < pixels.length; i += 4) {
createPoint(pixels, i);
}
Slide 55
Slide 55 text
function createPoint(pixels, i) {
var dot = canvas(24, 24);
// outer white circle
dot.fillStyle = '#fff';
dot.arc(12, 12, 10, 0, Math.PI * 2, true);
// drop shadow
dot.shadowBlur = 2;
dot.shadowColor = 'rgba(0,0,0,.7)';
dot.shadowOffsetX = 2;
dot.shadowOffsetY = 2;
// fill outer ring
dot.fill();
// remove shadow
dot.shadowBlur = 0;
dot.shadowColor = 'rgba(0,0,0,0)';
dot.fillStyle = 'rgb(' + [
pixels[i], // red
pixels[i+1], // green
pixels[i+2] // blue
].join(',') + ')';
// start inner circle
dot.beginPath();
dot.arc(12, 12, 8, 0, Math.PI*2, true);
// fill inner circle
dot.fill();
new google.maps.MarkerImage(
dot.canvas.toDataURL('image/png')
);
}
Slide 56
Slide 56 text
new google.maps.MarkerImage(
dot.canvas.toDataURL('image/png')
);
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
1. Timer paints video into
canvas
2. Reads all pixels for bright
spots
3. Translates to the vector
4. Draws selected input
Slide 59
Slide 59 text
1. Flash and canvas share the same
black box features
2. People will abuse the technology
Slide 60
Slide 60 text
Scalable
Vector
Graphics
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
...using Flash!
Slide 63
Slide 63 text
Raphaël.js
Slide 64
Slide 64 text
3D
Slide 65
Slide 65 text
CSS
Yeah, 3D CSS.
Slide 66
Slide 66 text
#canvas {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 20em;
}
#rubiks {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(15deg) rotat
}
#rubiks .face1 {
-webkit-transform: rotateX(90deg) trans
}
#rubiks .face2 { /* front */
-webkit-transform: translateZ(10.8em);
}
#rubiks .face3 {
-webkit-transform: rotateY(90deg) trans
}
#rubiks .face4 { /* back face */
-webkit-transform: rotateY(180deg) tran
}
#rubiks .face5 {
-webkit-transform: rotateY(-90deg) tran
Slide 67
Slide 67 text
WebGL
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Mobile?
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
...or just ask
a question :)
- @rem