MediaMosa Player - Open source HTML5 weblectures player

19
opensource webdevelopment MEDIAMOSA PLAYER OPEN SOURCE HTML5 WEBLECTURES PLAYER opensource webdevelopment

description

MediaMosa Player - Open source HTML5 weblectures player .Presentation by Thijs Zoon, One Shoe.Event: March 29-31, 2011: MediaMosa and TF-Media conference 'MediaMosa, weblectures & open video'

Transcript of MediaMosa Player - Open source HTML5 weblectures player

Page 1: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

MEDIAMOSA PLAYEROPEN SOURCE HTML5 WEBLECTURES

PLAYER

opensource webdevelopment

Page 2: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

TODAYCONFERENCEMEDIAMOSA, WEBLECTURES AND OPEN VIDEO

who am I and who is One Shoe

open source video player

definition of HTML 5the state of HTML 5 videobrowser adoption

componentsthe player

challenges aheadfuture releasesquestions

MARCH 29th 2011

INTRODUCTION

HTML 5 VIDEO

WEBLECTURES

CONCLUSION

MEDIAMOSA

Page 3: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

ONE SHOE

WHO IS

3

Thijs ZoonGeneral manager R&D / Product development

system architect, drupal nerd, research & development honcho, code purist, music enthousiast

[email protected]+31 (0)30 2317521

based in utrecht, 38 employees, web development, advertising, digital branding, mobile, drupal specialist

WHO AM I

[email protected]@oneshoe+31 (0)30 2317521

opensource webdevelopment

Full service internet company

Page 4: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

Introduction

4 COOPERATING DIVISIONS

webdesign

websites

intranet

communities

web applications

seo/sea

hosting

drupal

support

research & development

mobile websites

iOS apps iphone/ipad

android apps

symbian apps

windows phone apps

qr codes

mobile gaming

mobile advertising

crossmedia

concepts

online branding

online marketing

marketing

development

campaigns

pr and advertising

guerilla marketing

concept development

identity design

communication strategies

search engine strategies

outdoor advertising

4

Page 5: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

5

opensource webdevelopment

MEDIAMOSA PLAYER

OPEN SOURCE

Page 6: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

6

OPEN SOURCE MEDIAMOSA PLAYER

Multi-stream Captions / subtitles Slides HTML 5

MediaMosa

Page 7: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

7

opensource webdevelopment

HTML 5DEFINITION OF

Page 8: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

HISTORY OF HTML

Introduction of HyperText Markup Language

Standardization, first adoption as open standard, Mosaic browser

HTML 2.0 specs released, browser war between Netscape

and Internet Explorer

HTML 3.2 and 4 specs released

A stricter XHTML standard is released

WHATWG (Web Hypertext Application Technology Working

Group)

First draft of HTML 5 specs are published

1989

1993 1995 1997 1999 2004 2008

8HTML 5 video

Page 9: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

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, not a single browser implements 75% of all HTML5 features

HTML5 specs are in draft, expected full recommendation in 2022

HTML 5 video

Page 10: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

HTML 5THE <VIDEO> ELEMENT

opensource webdevelopment

Page 11: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

11

BROWSER ADOPTION

55% of visitors have a browser that supports the video element

93% of visitors have Flash 10+ Codec war

HTML 5 video

Page 12: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

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>

HTML 5 video

Page 13: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

WEBLECTURESBEYOND THE <VIDEO> ELEMENT

opensource webdevelopment

Page 14: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

14

COMPONENTS

Video (primary) Video (secondary) Slides Captions / subtitles Timed events, text and images Transcript(s) Additional downloads

Weblectures

Page 15: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

MEDIAMOSA PLAYEROPEN SOURCE HTML5 WEBLECTURES PLAYER

opensource webdevelopment

Page 16: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

16

CHALLENGES AHEAD

Changing HTML5 specifications and browser implementations

Codec war Bugs in Chrome, Mobile Safari

Conclusion

Page 17: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

17

FUTURE RELEASES

Better support for iOS (iPad and iPhone) Integrated fallback player (Adobe Flash)

Conclusion

Page 18: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

THANK YOUQUESTIONS ANYONE?

opensource webdevelopment

Phone: E-mail:

+31 (0)[email protected]

Thijs ZoonGeneral manager R&D / Product development

www.oneshoe.nl@oneshoe

Web:Twitter:

Page 19: MediaMosa Player - Open source HTML5 weblectures player

opensource webdevelopment

19

MORE INFORMATION

In depth information on HTML5 videohttp://diveintohtml5.org/video.html

HTML5 and it’s support historyhttp://en.wikipedia.org/wiki/HTML5_video

Browser version statisticshttp://gs.statcounter.com/#browser_version-ww-monthly-201002-201102

Test a browser’s HTML5 supporthttp://html5test.com or http://caniuse.com

VideoJS, HTML5 playerhttp://videojs.com

Or contact One Shoe: www.oneshoe.nl

More information