Presentation is loading. Please wait.

Presentation is loading. Please wait.

SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013.

Similar presentations


Presentation on theme: "SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013."— Presentation transcript:

1 SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013

2 Multimedia Canvas SVG Today: 2

3 What’s a codec? 3 xxxfile types Download this file. Download the MP3 version

4 Audio and HTML5: 4 HTML4 relied on 3 rd party plugins for multimedia HTML5: plan was to not do that and HTML5: cascading support for audio file types Download this file. Download the MP3 version

5 Audio and HTML5: 5 Current (2014) support: Firefox:.ogg Webkit:.mp3 Opera (pre-10):.wav only Download this file. Download the MP3 version Plays first file type it understands

6 Video and HTML5: 6 Current (2014) support: Safari, IE9: H.264 Firefox: Theora open source codec Opera: Vorbis (firefox and opera: theora and vorbis)_ Chrome:.ogg and.mp4 Set type type to save the browser from doing this work Your browser is old. Kill it quickly. Download this video instead. Plays first file type it understands

7 Video and HTML5: 7 Other video stuff: Preload attribute Controls displays controls

8 Audio and HTML5: 8 Do you really mean it? Audio can be major annoyance (rahatsız etmek) Typically use.mp3 file type (.wav or.ogg) May or may not be streamed (akım) Problem: file size distraction

9 Audio and HTML5: 9 Both placed in : Audio played in background (no controls) Browser controls, appearance varies (embedded)

10 Audio and HTML5: 10 Audio support: no universal agreement on anything MP3WAVOGG ChromeYesNoYes FirefoxNoYes IE 9YesNoNo* OperaNoYesNo SafariYesNoYes

11 Audio and HTML5: 11 Due to file sizes, preloading is a good idea Add ‘preload’ attribute

12 Video and HTML5: 12 More of the same pain continued Really??? Must you? YouTube is bad enough, this is video (even worse) No one wants to watch your stinking video Currently, Firefox and IE do not support

13 Video and HTML5: 13 Browser support is a problem: no universal agreement on anything H.264 =.mp4 and.mov H.264OGGWebM3GP ChromeNoYes No FirefoxNoYes???No IE 9No*NoNo*Yes OperaNoYes No SafariYesNo Yes Safari MobileNo Yes

14 Extensions change the browser itself Plugins allow the browser to do more things Plugins and extensions: 14

15 Adds abilities to a larger application Plugin uses (browser): video audio flash virus scanners display Office documents 3 rd party libraries plugins embedded into page ( or ) Plugins: 15

16 Similar idea Extensions are usually added toolbars Mozilla: Add-ons (plugins and extensions) Extensions are additional features: Toolbars New menus New tabs in an interface Extensions: 16

17 Allows ‘core program’ to be small Add ‘extra’ functions that you need via plugins The debate points: Plugins are less reliable Unknown author (support, liability, security, reliability) No brand to associate with Plugins: 17

18 Rich media = multimedia First there was text (Cern, circa 1991) Then there was images (1993) Then there was FutureSplash (1996) First successful version Rich media: 18

19 FutureSplash: a multimedia plug-in Proprietary; not an open specification RealPlayer QuickTime many others Rich media: 19

20 Flash: succeeded because it did a unique job well plug-in: no cross-browser issues issue today: do we want plug-ins? Rich media: 20

21 Rich media: 21 Flash: animation/multimedia tool in vector graphics* Issues with Flash: myth #8: Flash is dead myth #10: Browser vendors control HTML5 Do we want proprietary technologies?

22 Flash: time-based content; built on a timeline paradigm: animators (Walt Disney) combines vector graphics, bitmaps, audio Apple: no support for Flash on iPhone, iPad Rich media: 22

23 Rich media: 23 Flash versus Silverlight: Silverlight time-based Silverlight uses XAML (larger) and.NET

24 Rich media: 24 Silverlight, Flash are proprietary: challenges to accessibility challenge to device independence challenge to data portability don’t work well with other standards can promote interoperability money and access issues

25 Rich media: 25 Many mobile devices will not play Flash Workaround for all media:

';
Ads by Google