CS 200 Multimedia Objects in Web Pages

MultiMedia Objects Three primary types of multimedia objects  Audio  Video Includes Flash Objects  Images

User's Browser Makes a Difference Before learning HTML & JavaScript code to include multimedia objects, realize:  Wide variations in what users can play  Depends on the "codecs" (compression / decompression algorithms) currently installed as plug-ins or add-ons Examples: "Flash player" "Quicktime player" See next slide  Mobile devices present a new challenge Android, iPhone, iPad, etc.

Plug-ins, Add-ons Typically free downloads to the browser Allow various file types to play Examples:  QuickTime Player  RealMedia Player  Flash Player  ebrary: "electronic book reader" for UHH library online books

What Plug-Ins Are Installed? Find out... In Internet Explorer, Tools > Manage add-ons Select "All Add-ons" to see which ones are available Example: Flash Player

Zooming in the Add-Ons Screen These are browser add-ons to play content from a web page. Plugins to play.mov movies are circled.

What is installed in Firefox? Type in url line: about:plugins Quicktime.mov files can be played

Which ones are users likely to have? Which browser? JavaScript (yes or no)? Flash plug-in (yes or no)? See next 4 slides for usage statistics.

Browser Usage

JavaScript Usage (Statistic is rather old but seems to still be OK) (most recent estimate) JavaScript OnJavaScript Off January95%5%

Adobe Flash Player Version Penetration (#1 of 2)

Flash Penetration (from Adobe website)

Including Flash Objects Today: Focus on Flash Objects Aside: We have entire courses to develop Flash animations and games: Graphics and Game Programming (CS 130)

Flash -- Player is Widespread Usual file extensions for Flash files: .swf (shockwavefile) .flv (flash video) Sample Public Broadcasting Right-click to see whether it uses Flash

The Code -- and <object classid="clsid:D27CDB6E-AE6D-11cf-96B " width="320" height="290" id="flashmovie"> codebase=" swflash.cab#version=6,0,0,0" > <embed type="application/x-shockwave-flash" pluginspage=" width="320" height="290" src="flashmovie.swf" filename="flashmovie.swf" > Quite a few lines of code were omitted above. See lab for complete code.

Help with the code... please Multiple ways to get help writing the code:  Flash can write it (see next slide)  Dreamweaver and other web authoring programs can import a Flash object

Flash Can Create an HTML page to play the object In Flash, set the Publish Settings. Choose whether to detect Flash Version. File  Publish. The.html and.swf files will be created.

Dreamweaver can insert the media object

Follow a similar process for other formats. QuickTime is shown below. <object width="320" height="280" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=" <embed src="yourfile.MOV" width="320" height="280" autoplay="true" controller="false" pluginspage=" this classid means QuickTime where to download

More References: Online Textbook Pfaffenberger, Bryan. HTML, XHTML, and CSS Bible (3rd Edition) Copyright © John Wiley & Sons, Incorporated. All rights reserved. Chapter 14: Multimedia227 Introducing Multimedia Objects 227 Your multimedia options 228 Including multimedia in your Web pages 229 Multimedia Plug-Ins and Players 233 Flash 234 RealOne 234 Windows Media Player 234 QuickTime 235 Animations 236 Creating animated GIFs 236 Keeping files sizes small 236 Creating a Flash file 239 Video Clips 240 Sounds 241 Slide Shows 242 Exporting PowerPoint presentations to the Web 242 Exporting OpenOffice. org presentations 250 SMIL251 Summary256

HTML 5’s tag Theoretically solves iPhone & iPad not playing Flash. They (Safari) will play the H.264 format (usually mp4).

Problems Flash video will not play in some browsers iPad and iPhone do not support Flash videos If you convert video to another format, it will still not play in all browsers You must convert your video to many different formats element doesn’t work in older browsers

Easiest Current Solution Upload your video to Youtube and use either or code Youtube generates. Check this to generate code for older browsers

YouTube has started using YouTube is now using - works in iPads and iPhones! As long as it points to YouTube, they will interpret whether you can use Flash or need another format like H.264. If you write your own, it may not work as you hoped when uploaded. (Might display separately from the web page.)

Multimedia, Color, Design Lab Start Lab 08 – Due Thursday, March 14 th, 5 pm Include the code for a Flash object in a web page Include a YouTube object in a web page (must relate to your project)  You may use the code that YouTube provides. Locate the browser add-ons you have. Take a screen shot and include them in your web page. (The lab continues with other items about color and design) Homework 08 is also due March 14 th.