MultimediaWidgets

Multimediaaudio video object

Sound in HTML5

<audio controls> <source src="h.wav" type="audio/wav"></audio>

Options:controlsautoplay

Videos in HTML

<video controls> <source src="m.mp4" type="video/mp4" /></video>

Need to define height and widthOptions:

controls autoplay

Videos on YouTube

Not downloaded Steps

› Share› Embed› Choose size› Copy and paste the text (iframe)

YouTube Warnings

• YouTube videos do not display when run from your local file. You will get a gray box that says file not found. It will work fine once uploaded.

• YouTube HTML that you load does not validate. It uses an attribute frameborder=“0” that has been deprecated (is no longer supported). It is formatting that should be done in the CSS. In this case it means not to put on a border and if you delete it, it has the same impact. You can format the iframe element just as you would any other element

Other Documents

Object<object data="cauliflower.pdf"></object>

Size of object: scroll bars Linking a pdf: can open in a browser, but not part of your website

Widgets

Widgets

A chunk of code that you can embed in an existing environment

Differences› Resides: desktop or web› Embedding: any page or application or

limited› Runs: your machine or server

How Widgets are Built

Today, most use HTML and embed tag Also will see iframe and script In any case, rules are the same

› Must validate› Clean up formatting› Often easier to work if formatted

Exception for iframe› Need to keep width and height› Just numbers (represent px)

Using Widgets

Finding› General websites (may have old stuff)› Specific sites› Working this year:

http://100widgets.com/ http://localtimes.info/getwidget/

Adding› Add› Format

Enclose in div position and format

Warning: make sure that your browser isn’t blocking them

Problems with Widgets

They have divs in them that you can’t see› Implicaton: if you format all divs, it applies to

the ones in the widget› Solution: name all divs with class or use section

or header, … They may use & or blank in URLs

› Implication: won’t validate› Solution: replace all &s with &amp; and all

blanks with %20 They may be old

› Don’t use if too many obsolete tags

Steps for adding a widget

1. Assure that you have no unnamed divs2. Layout your page with a placeholder div that is the

size of the widget that you are going to add3. Add the widget inside the div4. Assure that it looks the way that you want5. Format the embedded code without any changes6. Replace all inline formatting with classes and css7. Assure that it still looks right8. Eliminate any unneeded tags or css entries9. Assure that it still looks right10. Replace all & and blanks as needed11. Validate