MediaMosa Player v2_0 OPEN SOURCE HTML5 WEBLECTURES PLAYER Date: November 22, 2011 Presenter: Thijs Zoon - One Shoe

1. MEDIAMOSA PLAYER
OPEN SOURCE HTML5 WEBLECTURES PLAYER
opensource webdevelopment!
!

2. TODAY
INTRODUCTION
who am I and who is One Shoe
CONFERENCE
MEDIAMOSA
open source video player
MEDIAMOSA,
WEBLECTURES HTML 5 VIDEO
definition of HTML 5
the state of HTML 5 video
AND OPEN VIDEO
browser adoption
NOVEMBER 22nd 2011! WEBLECTURES
components
the player
CONCLUSION
challenges ahead
future releases
questions
opensource webdevelopment!
!

3. 3
WHO AM I
WHO IS
ONE SHOE
Thijs Zoon! Full service internet company!
General manager R&D / Product development
system architect, drupal nerd, based in utrecht, 38 employees,
research & development honcho, web development, advertising,
code purist, music enthousiast! digital branding, mobile, drupal
specialist!
thijs.zoon@oneshoe.nl! www.oneshoe.nl!
+31 (0)30 2317521! info@oneshoe.nl!
@oneshoe!
+31 (0)30 2317521!
opensource webdevelopment!
!

4. Introduction
4
4 COOPERATING DIVISIONS
reclame & communicatie opensource webdevelopment mobile digital branding
campaigns
webdesign
mobile websites
crossmedia
pr and advertising
websites
iOS apps iphone/ipad
concepts
guerilla marketing
intranet
android apps
online branding
concept development
communities
symbian apps
online marketing
identity design
web applications
windows phone apps
marketing development
communication strategies
seo/sea
qr codes
search engine strategies
hosting
mobile gaming
outdoor advertising
drupal
mobile advertising
support
research & development
opensource webdevelopment!
!

5. 5
OPEN SOURCE
MEDIAMOSA PLAYER
opensource webdevelopment!
!

6. MediaMosa
6
OPEN SOURCE MEDIAMOSA PLAYER
§ Multi-stream
§ Captions / subtitles
§ Slides
§ HTML 5
opensource webdevelopment!
!

7. 7
DEFINITION OF
HTML 5
opensource webdevelopment!
!

8. HTML 5 video
8
HISTORY OF HTML
Introduction of HyperText First draft of HTML 5 specs are
Markup Language
HTML 3.2 and 4 specs released published
Standardization, first adoption as A stricter XHTML standard is
open standard, Mosaic browser
released
HTML 2.0 specs released,
WHATWG (Web Hypertext
browser war between Netscape
Application Technology Working
and Internet Explorer
Group)
1989
1993
1995
1997
1999
2004
2008
opensource webdevelopment!
!

9. HTML 5 video
9
DEFINITION OF HTML 5
§ Ongoing effort to implement a standard for richer web
applications
§ Common name for a combination of JavaScript-
HTML, CSS novelties
§ Currently, only Chrome 14 implements 75% of HTML5
§ HTML5 specs are in draft, expected full
recommendation in 2022
opensource webdevelopment!
!

10. HTML 5
THE <VIDEO> ELEMENT
opensource webdevelopment!
!

11. HTML 5 video
11
BROWSER ADOPTION
§ 67% of visitors have a browser that
supports the video element
§ 93% of visitors have Flash 10+
§ Codec war
opensource webdevelopment!
!

12. HTML 5 video
12
CODEC WAR
<video …>
<source src=”vid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src=”vid.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src=”vid.ogv" type='video/ogg; codecs="theora, vorbis"' />
...
</video>
opensource webdevelopment!
!

13. WEBLECTURES
BEYOND THE <VIDEO> ELEMENT
opensource webdevelopment!
!

14. Weblectures
14
COMPONENTS
§ Video (primary)
§ Video (secondary)
§ Slides
§ Captions / subtitles
§ Timed events, text and images
§ Transcript(s)
§ Additional downloads
opensource webdevelopment!
!

15. MEDIAMOSA PLAYER
OPEN SOURCE HTML5 WEBLECTURES PLAYER
opensource webdevelopment!
!

16. Conclusion
16
CHALLENGES AHEAD
§ Changing HTML5 specifications and browser
implementations
§ Codec war
§ Browser legacy
§ Bugs in Chrome, Mobile Safari
§ Fast pace in which new features are introduced
opensource webdevelopment!
!

17. Conclusion
17
FUTURE RELEASES
§ Better support for iOS (iPad and iPhone)
§ Plans for SMIL-like annotations and timed events
§ Single javascript API with integrated fallback player
(Adobe Flash)
opensource webdevelopment!
!

18. THANK YOU
QUESTIONS ANYONE?
Thijs Zoon
Phone:
+31 (0)302317521
Web:
www.oneshoe.nl
General manager R&D / Product development
E-mail:
thijs.zoon@oneshoe.nl
Twitter:
@oneshoe
opensource webdevelopment!
!

19. More information
19
MORE INFORMATION
§ In depth information on HTML5 video"
http://diveintohtml5.org/video.html
§ HTML5 and it’s support history"
http://en.wikipedia.org/wiki/HTML5_video
§ Browser version statistics"
http://gs.statcounter.com/
§ Test a browser’s HTML5 support"
http://html5test.com or http://caniuse.com
§ VideoJS, HTML5 player"
http://videojs.com
§ Or contact One Shoe: www.oneshoe.nl
opensource webdevelopment!
!