INTRODUCTION
02.07
Multimedia TO HTML
Multimedia!
Adding video and audio materials!
INTRODUCTION
02.07
Multimedia TO HTML
Objectives!
• Describe HTML5 audio and video
elements!
• Explain the purpose of plugins!
• Reflect on Accessibility issues!
INTRODUCTION
02.07
Multimedia TO HTML
HTML5 Multimedia!
• Designed to avoid the use of extra
software to play music/video!
!
• Not fully implemented!
INTRODUCTION
02.07
Multimedia TO HTML
Video element <video>!
• Video tag uses a src attribute or embedded <source>!
• Common attributes!
• height, width!
• autoplay!
• loop!
• controls!
• Text inside <video>..</video> is displayed if browser can
not support tag!
!
INTRODUCTION
02.07
Multimedia TO HTML
Audio element <audio>!
• Audio tag uses a src attribute to link to audio
file, typically .mp3 or .wav!
• Common attributes!
• autoplay, controls, loop!
• buffered!
• muted!
• volume!
INTRODUCTION
02.07
Multimedia TO HTML
Setting clips!
• You can set both the video and audio elements
to play clips by adding to the src attribute.!
• .ext#t=5, 25!
• .ext#t=, 39!
• .ext#t=, 1:38:45!
• .ext#t=42!
INTRODUCTION
02.07
Multimedia TO HTML
Plugins!
• Before HTML5 there was no standard for
video display, plugins were required!
• Since not all browsers support new tag
some may require Flash!
INTRODUCTION
02.07
Multimedia TO HTML
Accessibility Issues!
• Make sure to provide links to plugins!
• Include text descriptions and closed
captioning (or other equivalent content)!
• Multimedia should enhance your content, not
be a distraction!
INTRODUCTION
02.07
Multimedia TO HTML
Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel free
to add your name and organization to the list of contributors on this
page as you republish the materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information!
!