HTML5 - moving beyond Flash & Silverlight

The Migration Path to HTML5
Moving beyond Flash and Silverlight

Jan Petzold │Deutsche Welle, New Media

Deutsche Welle


Introduction


Deutsche Welle

Facts and figures
- Germany’s international broadcaster, founded in 1953

- Global reach of more than 86 million weekly listeners and viewers

- Studios in Brussels, Washington and
Moscow

- Around 1,500 employees from more than
60 countries

- More than 5.000 partners

- 1,000 journalists, technicians and managers
educated by DW-AKADEMIE each year


Deutsche Welle

Mission
- DW is journalistically independent

- DW provides extensive and uncensored information to countries in which freedom of
the press is restricted or nonexistent

- DW is a mediator in intercultural dialog


DW Audio and video
products


Audio and video portfolio

DW MediaCenter
- All audio and video items are accessible in one interface

- Available in English, German and Arabic (planned: Spanish, Farsi, Russian)

http://mediacenter.dw-world.de



Players on DW website and partner websites



Specials
- Examples: Global Ideas, Future Now, Coming Home

http://expedition-heimat.dw-world.de


Why HTML5?

Jan Petzold │Deutsche Welle, New media

HTML5 advantages

Water taps ≠ standard, but HTML5 is! (well, almost)
- Currently draft status at W3C (http://dev.w3.org/html5/spec/Overview.html) but
already widely used

- The “product” doesn’t belong to anyone, individual implementation

- All current releases of the major browsers support HTML5

- Far better accessibility (SEO) compared to Flash/Silverlight

- Layout may be adjusted inside the browser (text size, back button, etc.)

- No need to install a plugin, open source audio/video codecs (WebM & OGG)

- Better integration with Javascript and CSS

- Native browser functions increase browser stability

- Great perspective (Windows 8, PhoneGap, etc.)


HTML5 advantages

Major companies are embracing HTML5
- Apple: http://www.apple.com/html5/ (device support, showcase)

- Microsoft: http://www.youtube.com/watch?v=SJTyY2csya8 (German HTML5 training)

- Adobe: http://www.adobe.com/choice/createwithoutlimits.html (HTML5 extension
pack for Dreamweaver)

- Google: http://slides.html5rocks.com (HTML5 presentation built in HTML5)

- Facebook: https://www.facebook.com/note.php?note_id=438532093919 (using
HTML5 on Facebook, e.g. video players)

© adobe.com


HTML5 capable browsers - market share

W3C statistics vs. DW statistics (August 2011)
W3C DW

IE 9 Firefox 6,5,4,3.5 Safari
IE 9 Firefox 6,5,4,3.5 Safari
Opera IE 8,7,6 Firefox 3,2,1
Opera IE 8,7,6 Firefox 3,2,1

Sources: http://www.w3schools.com/browsers/browsers_stats.asp / DW internal statistics


But…?


HTML5 disadvantages

- “Old” browsers (<IE 9, <Firefox 3.5) don’t support HTML5

- Different browser implementations for audio/video
(AVC vs. WebM vs. Theora vs. AAC vs. MP3)

- No standards for streaming

- No support for DRM (see http://www.w3.org/Bugs/Public/show_bug.cgi?id=10902)

- No fullscreen mode for browsers (except Webkit)

- Performance of Flash/Silverlight apps is still generally better
than HTML5 (example: Bitmap Data)

- Lack of decent IDEs and workflow tools
(compared to Adobe CS and Microsoft Expression)


HTML5 disadvantages

Different browsers = different video formats
- No consistent browser Browser / platform MP4 WebM
support for a single
format, mainly related to Firefox 3.5+
patent issues +Theora

- Unlikely to change soon Internet Explorer 9
Plugin available

- iOS and Android (3.0+) support
HTTP Live Streaming, but no Google Chrome
deprecated
desktop browser does
Apple Safari
- Audio - same situation:
- MP4 (AAC) iOS 5
- OGG

- MP3 Android 2.3.3+


Mobile


Mobile sales vs. PC sales

PC sales (includes Smartphone sales
desktop, notebook, netbook, but not tablets)

Source: Gartner


Mobile devices

HTML5 on mobile devices
- HTML5 is supported on all current Smartphone OS

- Silverlight and Flash rarely supported

- RTSP support on all platforms in theory, but depends
on mobile service provider

- Progressive download is (practically) the only
reliable option

- iOS & Android (3.0+) support HTTP Live Streaming:
http://developer.android.com/sdk/android-3.0-highlights.html

- Former “unwritten laws” for mobile devices don’t really exist anymore (small
screen, low resolution, slow processor, etc.)


Creating HTML5


HTML5 Development

Tools and Examples
- For coding, use the same tools you would use for HTML (Dreamweaver, Aptana, etc.)

- For animations via GUI:

- Adobe Edge

- Sencha Animator

- Tumult Hype

- Code “quality” leaves room for
improvement
Adobe Edge
- Animations are slower compared
to Flash, but Javascript compilers get faster in every browser release (Chrome)


Creating HTML5

Audio and Video encoding
- H.264/AAC is supported by almost any product on the market

- WebM (VP8/OGG Vorbis) is supported widely (e.g. Squeeze, Zencoder, flumotion, …)
see full list at http://www.webmproject.org/tools/

- For best compatibility: choose AVC Baseline profile (works with HTML5 / Flash /
Silverlight and old iPhones / iPods, add WebM for HTML5 compatibility

- DW uses various tools (Carbon Coder,
FlipFactory) for encoding

- Carbon Coder still doesn’t support WebM
Encoding stuff…
format

- VP8 encoding is quite slow compared to
H.264 – will improve
Ian Hampton


Creating HTML5

Audio and Video playback
- Several frameworks / platforms: Kaltura, JW, popcorn.js, Microsoft Framework, etc.

- DW has own video player – main reasons: flexibility, CMS integration, changes in video
delivery/formats, exchange Flash/HTML5, custom layout & appearance

- Current implementation is a mix between Flash and HTML/Javascript:


Creating HTML5

HTML5 markup
- Lots of tutorials, example: http://camendesign.com/code/video_for_everybody

- I recommend to use SWFObject to detect browser flash capabilities via Javascript

- Code example:

<object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<video width="640" height="360" controls>
<source src="video.mp4" />
<source src="video.webm" type="video/webm" />
</video>
</object>


HTML5 Development

ActionScript and Javascript
- Roots are the same – ECMAScript (ISO/IEC 16262), ActionScript is a dialect of JavaScript

- ActionScript 3 is OOP, Javascript is … somehow OOP

- For audio/video handling, see these examples:

Command ActionScript 3.0 JavaScript
Start a video ns.play(); video.play();

Seek to time 25s ns.seek(25); video.currentTime = 25;

var nsClient:Object = new Object();
nsClient.onMetaData = myHandler;
ns.client = nsClient;
Get the duration video.duration;
function myHandler(info:Object):void {
duration = info.duration;
}
var s:SoundTransform = new SoundTransform();
Set the volume to 80% s.volume = 0.8; video.volume = 0.8;
ns.soundTransform = s;


Q&A


Thanks a lot!

Jan Petzold
Deutsche Welle

Mail: Jan.Petzold@dw-world.de


HTML5 - moving beyond Flash & Silverlight

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

HTML5 - moving beyond Flash & Silverlight