audio video object options: controls autoplay need to define height and width options: controls...
TRANSCRIPT
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 & 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