HTML5: where flash isn't needed anymore

HTML5 vs. Flash
Where Flash isn’t needed anymore

Remy Sharp
@rem
Sometimes does
flash-ing

1. video & Audio
2. Real-time
3. Graphics

Video killed the
radio Flash star?

Who would jump to create
another video player?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Video Example</title>
</head>
<body>
<video src="dizzy.mp4" controls></video>
</body>
</html>

Video for Everybody
<video width="640" height="360" poster="dizzy.jpg" controls>
<source src="dizzy.mp4" type="video/mp4" />
<source src="dizzy.web" type="video/webm" />
<source src="dizzy.ogv" type="video/ogg" />
<object width="640" height="375" type="video/quicktime" data="dizzy.mp4">

<param name="src" value="dizzy.mp4" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="player.swf?image=dizzy.jpg&file=dizzy.mp4">
<param name="movie" value="player.swf?image=dizzy.jpg&file=dizzy.mp4" />
<img src="dizzy.jpg" width="640" height="360" alt="Title of video"
title="No video playback capabilities, please download the video below" />
</object></object>
</video>
<p>Download Video: <a href="dizzy.mp4">High Quality "MP4"</a> | <a href="dizzy.ogv">Low Quality "OGG"</a></p>

http://camendesign.com/code/video_for_everybody

var video = document.getElementById('myVideo');
if (video.paused) {
video.play();
}

var video = document.getElementById('myVideo');
if (video.paused) {
video.play();
}

// position & asTime defined elsewhere
video.addEventListener('timeupdate', function () {
positon.innerHTML = asTime(this.currentTime);
}, false);

Simple API
Methods: play(), pause(), canPlayType(mime)

Properties: currentTime, paused, duration,
loop, autoplay, muted, volume, etc

Events: loadedmetadata, canplay, progress,
play, pause, seeking, timeupdate, etc

Fullscreen?
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 ﬁle, 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 speciﬁc interface features
may be provided to easily allow the user to obtain a full-screen
playback mode.

1. No plugins required
2. Simple API: play, pause, etc
3. Video & Audio: the same
4. HTML & CSS - no compile or
different skills required

Flash will be needed
as a backup to video
for a while yet.

http://rem.im/collab-drawing.html

WebSocket
•Low latency

• Bi-directional

• No same-original rules

• Chrome, Safari, MobileSafari & Firefox

• Fallback on Flash...ironically

WebSocket
var ws = new WebSocket("ws://myserver.com/");

ws.onmessage = function (event) {
var data = JSON.parse(event.data);
};

ws.onclose = function () {};

ws.onopen = function () {};

ws.onmessage = function (event) {
};

All message data lives here

EventSource
•Server pushed events

• Same-original rules apply

• Can fallback with JavaScript

EventSource
var es = new EventSource("/x-service/");

es.onmessage = function (event) {
};

es.onopen = function () {};

HTML5
<canvas></canvas>

var canvas = document.getElementsByTagName(‘canvas’)[0],
ctx = canvas.getContext(‘2d’);

2D drawing API

Google Analytics - Flash charts

Interactive Demo - Canvas charts

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);
}

function createPoint(pixels, i) { // remove shadow
var dot = canvas(24, 24); dot.shadowBlur = 0;
dot.shadowColor = 'rgba(0,0,0,0)';
// outer white circle
dot.fillStyle = '#fff'; dot.fillStyle = 'rgb(' + [
dot.arc(12, 12, 10, 0, Math.PI * 2, true); pixels[i], // red
pixels[i+1], // green
// drop shadow pixels[i+2] // blue
dot.shadowBlur = 2; ].join(',') + ')';
dot.shadowColor = 'rgba(0,0,0,.7)';
dot.shadowOffsetX = 2; // start inner circle
dot.shadowOffsetY = 2; dot.beginPath();
dot.arc(12, 12, 8, 0, Math.PI*2, true);
// fill outer ring
dot.fill(); // fill inner circle
dot.fill();

new google.maps.MarkerImage(
dot.canvas.toDataURL('image/png')
);
}

new google.maps.MarkerImage(
dot.canvas.toDataURL('image/png')
);

1. Timer paints video into
canvas

2. Reads all pixels for bright
spots

3. Translates to the vector

4. Draws selected input
http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video

1. Flash and canvas share the same
black box features
2. People will abuse the technology

#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

...or just ask
a question :)

- @rem

HTML5: where flash isn't needed anymore

More Related Content

What's hot (20)

Similar to HTML5: where flash isn't needed anymore (20)

More from Remy Sharp (14)

Recently uploaded (20)

HTML5: where flash isn't needed anymore