1. M ULTIMEDIA ON THE W EB

2. Multimedia Purpose of Multimedia Multimedia Issues HTML5 and elements CSS Transitions and Animations Animation to avoid

3. Multimedia on the Web Multimedia is a mix of different dynamic content such as – Animation (2D and 3D) – Video – Audio – Effects – Vector animation (Flash, Silverlight)

4. Multimedia on the Web Reach Media Applications (Rich Media Adds) – uses audio, video, and dynamic content, that catch user’s attention and persuade a user to click through to the advertiser’s site. Prior to HTML5 multimedia required plug-ins – a proprietary software associated with a specific platform and browsers to extend browser capability Usually free for download Plug-ins impose multiple problems (mobile devices) HTML5 provides native support for multimedia (video and audio) without plug-ins.

5. Multimedia issues Time factor – download time Older browser support Accessibility issues

6. HTML5 element Sorry, your browser doesn’t support HTML video. Click the link to view the movie ….

7. attributes poster =“url” – Specifies still image frame while video is downloading controls=“controls” (or just controls) – displays controls (play, stop, volume, and etc)

8. file formats There is no standardized file format supported by all browsers. Commonly used HTML5 video formats: MP4 – de facto standard Ogg (Theora) WebM

9. codec Codec - coder-decoder, a compression algorithm used to reduce file size MP4 – H.264 WebM – VP8 Ogg – Theora for Video

10. - cross-browser solutions

11. HTML5 element Sorry, your browser doesn’t support HTML5 audio. Click the link to play…

12. File Formats Browsers support MP3 – is supported by most of the browsers Ogg Wav – native IE format tag is used to specify multiple formats

13. cross-browser solution tag is used to specify multiple formats:

14. Animation Animated GIFs – compilation of still images set into sequence Rollovers – actions triggered by passing the mouser pointer over the links or buttons. CSS3 Transitions and Animations

15. CSS3 Transitions Allow changing CSS properties over a period of time Rotate objects Translate objects Skew objects Scale objects Allows to change almost all CSS properties, such as color, background-color, positioning, width, height, and so on. transition-property – specifies property to change

16. CSS3 Transition - duration transition-duration specifies how long the transition will last in seconds (s) or milliseconds (ms)

17. CSS3 Transition–timing functions transition-timing-function: ease-in -starts slow and speeds up ease-out - starts quickly, and then slows down ease-in-out - starts slow then speeds up and then slows down

18. CSS Transition rule: p { transition-property:background; transition-duration: 2s transition-timing-function:ease-in-out } Short-hand: p { transition:background 2s ease-in-out; }

19. CSS Transition rule: p { transition-property:background; transition-duration: 2s transition-timing-function:ease-in-out } Short-hand: p { transition:background 2s ease-in-out; }

20. CSS3 Animation CSS animation controls multiple steps of an animation via @keyframes rule: @keyframes myAnimation { 0% {color:black;} 50% {color:red;} 100% {color:green} }

21. Applying Animation p { animation: myAnimation 5s ease-in; -moz-animation: myAnimation 5s ease-in ; -webkit-animation: myAnimation 5s ease-in; } Use browser-specific prefixes to support most of the browsers: -moz (for FF) -webkit- (for Safari and Chrome), -o- (for Opera)

22. Animations to Avoid Scrolling text (marquee) GIF animations with infinite loops Flickering (flashing) animation.