Embed Size (px)
DESCRIPTION
Audio and Video on the Web. Sec 5-12. Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials and W3schools.com. Objectives. The student will Understand how to use the and elements in HTML5 - PowerPoint PPT Presentation
Citation preview
Audio and Video on the WebSec 5-12
Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials and W3schools.com
ObjectivesThe student will
1. Understand how to use the <video> and <audio> elements in HTML5
2. Understand the video and audio file formats supported in HTML5
3. Use free tools to convert video and audio files for the web.
Audio and Video on the Web
Until HTML5, there has not been a standard for showing a video/audio on a web page.Today, most sounds and videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines new elements which specifies a standard way to embed a audio/video on a web page: the <audio> and <video> elements.
Browser SupportInternet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> and <video> elements.Note: Internet Explorer 8 and earlier versions, do not support the <video> element.
Adding Audio and Video<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type='video/webm' > <source src="movie.ogg" type="video/ogg">
Your browser does not support video.</video>
<audio controls> <source src=”audio.mp3" type="audio/mpeg"> <source src=”audio.wav" type="audio/wav"> <source src=”audio.ogg" type="audio/ogg"> Your browser does not support this audio format.</audio>
Video ElementsThe control attribute adds video controls, like play, pause, and volume.It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.
Example - Video<!DOCTYPE html><html><body><h1>Big Buck Bunny</h1><video controls width=640 height=355>
<source src="movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie/movie.webm" type='video/webm' ><source src="movie/movie.mp4" type='video/mp4'><p>Video is not visible, most likely your browser does not support
HTML5 video</p></video><br/><p> Video courtesy of Big Buck Bunny. </p></body></html>
Video File FormatsVideo Formats and Browser Support
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
MP4 = MPEG 4 files with H264 video codec and AAC audio codecWebM = WebM files with VP8 video codec and Vorbis audio codecOgg = Ogg files with Theora video codec and Vorbis audio codec
MIME Types for Video Formats
Preparing Videos for the Web
There are free tools which allow you to convert videos to the formats required for HTML5.The tool I have chosen to use here is “Freemake Video Converter”
Add the videoSelect “to HTML5” on the bottom and click convert.The result will be the various formats of the video and sample HTML5 code.
Audio ElementsThe control attribute adds audio controls, like play, pause, and volume.You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.
Example - Audio<!DOCTYPE html><html><body><h1>Green Day - Good Riddance</h1><audio controls>
<source src="audio/audio.mp3" type="audio/mpeg"> <source src="audio/audio.wav" type="audio/wav"> <source src="audio/audio.ogg" type="audio/ogg">Your browser does not support the audio element.
</audio></body></html>
Audio File FormatsAudio Formats and Browser Support
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:
MIME Types for Audio Formats
Preparing Videos for the Web
There are free tools which allow you to convert audio to the formats required for HTML5.The tool I have chosen to use here is “Freemake Audio Converter”
Add the audio fileSelect MP3 and convertRepeat for OGG and WAV
Rest of TodayDownload Homework 5-12 from the Hancock websiteComplete Homework 5-12 by adding 1 video and 1 audio file to your web pageYou have only 2 days to complete this.
Example graphics.html File
