1 / 15

Audio and Video on the Web

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 <video> and <audio> elements in HTML5

kalil
Download Presentation

Audio and Video on the Web

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

  2. Objectives The student will • Understand how to use the <video> and <audio> elements in HTML5 • Understand the video and audio file formats supported in HTML5 • Use free tools to convert video and audio files for the web.

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

  4. Browser Support • Internet 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.

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

  6. Video Elements • The 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.

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

  8. Video File Formats • Video 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 codec • WebM = WebM files with VP8 video codec and Vorbis audio codec • Ogg = Ogg files with Theora video codec and Vorbis audio codec • MIME Types for Video Formats

  9. 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 video • Select “to HTML5” on the bottom and click convert. • The result will be the various formats of the video and sample HTML5 code.

  10. Audio Elements • The 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.

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

  12. Audio File Formats • Audio Formats and Browser Support • Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg: • MIME Types for Audio Formats

  13. 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 file • Select MP3 and convert • Repeat for OGG and WAV

  14. Rest of Today • Download Homework 5-12 from the Hancock website • Complete Homework 5-12 by adding 1 video and 1 audio file to your web page • You have only 2 days to complete this.

  15. Example graphics.html File

More Related