M ULTIMEDIA ON THE W EB

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

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)

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.

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

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

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

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

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

- cross-browser solutions

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

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

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

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

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

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

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

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; }

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; }

CSS3 Animation CSS animation controls multiple steps of an animation myAnimation { 0% {color:black;} 50% {color:red;} 100% {color:green} }

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)

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