1 / 13

Multimedia Widgets

Learn about the options and controls available for multimedia widgets in HTML5, including audio and video elements. Find out how to embed videos from YouTube and link PDFs. Understand the steps for adding and formatting widgets and avoid common problems.

amoody
Download Presentation

Multimedia Widgets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MultimediaWidgets

  2. Multimedia audio video object

  3. Sound in HTML5 <audio controls> <source src="h.wav" type="audio/wav"> </audio> Options: controls autoplay

  4. Videos in HTML <video controls> <source src="m.mp4" type="video/mp4" /> </video> Need to define height and width Options: controls autoplay

  5. Videos on YouTube • Not downloaded • Steps • Share • Embed • Choose size • Copy and paste the text (iframe)

  6. 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 note 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

  7. 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

  8. Widgets

  9. 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

  10. 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)

  11. Using Widgets • Finding • General websites (may have old stuff) • Specific sites • Adding • Add • Format • Enclose in div • position and format • Warning: make sure that your browser isn’t blocking them

  12. 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

  13. Steps for adding a widget • Assure that you have no unnamed divs • Layout your page with a placeholder div that is the size of the widget that you are going to add • Add the widget inside the div • Assure that it looks the way that you want • Format the embedded code without any changes • Replace all inline formatting with classes and css • Assure that it still looks right • Eliminate any unneeded tags or css entries • Assure that it still looks right • Replace all & and blanks as needed • Validate

More Related