4. 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
Jan Petzold │Deutsche Welle, New Media
5. 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
Jan Petzold │Deutsche Welle, New Media
6. DW Audio and video
products
Jan Petzold │Deutsche Welle, New Media
7. 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
Jan Petzold │Deutsche Welle, New Media
8. Audio and video portfolio
Players on DW website and partner websites
Jan Petzold │Deutsche Welle, New Media
9. Audio and video portfolio
Specials
- Examples: Global Ideas, Future Now, Coming Home
http://expedition-heimat.dw-world.de
Jan Petzold │Deutsche Welle, New Media
16. 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.)
Jan Petzold │Deutsche Welle, New Media
20. 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)
Jan Petzold │Deutsche Welle, New Media
21. 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+
Jan Petzold │Deutsche Welle, New Media
23. Mobile sales vs. PC sales
PC sales (includes Smartphone sales
desktop, notebook, netbook, but not tablets)
Source: Gartner
Jan Petzold │Deutsche Welle, New Media
24. 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.)
Jan Petzold │Deutsche Welle, New Media
26. 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)
Jan Petzold │Deutsche Welle, New Media
27. 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
Jan Petzold │Deutsche Welle, New Media
28. 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:
Jan Petzold │Deutsche Welle, New Media
29. 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>
Jan Petzold │Deutsche Welle, New Media
30. 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;
Jan Petzold │Deutsche Welle, New Media