Html audio video
Download as PPTX, PDF3 likes2,739 views
This document discusses audio and video support in HTML5. It covers the audio and video elements that allow embedding multimedia content in web pages without requiring plugins. The audio element is used to embed audio files while the video element embeds video files. Both support various attributes to control playback like autoplay, controls, and loop. Common audio and video file formats like MP3, MP4, Ogg and WebM are supported in HTML5. The document provides examples of using the audio and video elements and describes their attributes.
Html audio video
- 1. HTML AUDIO & VIDEO SESSION 11 Aptech Computer Education Presented by Muhammad Ehtisham Siddiqui (BSCS) 1
- 2. Objectives Describe the need for multimedia in HTML5 List the supported media types in HTML5 Explain the audio elements in HTML5 Explain the video elements in HTML5 Explain the accessibility of audio and video elements Describe how to deal with non-supporting browsers Presented by Muhammad Ehtisham Siddiqui (BSCS) 2
- 3. Introduction Presented by Muhammad Ehtisham Siddiqui (BSCS) 3 Traditionally, Web browsers were capable of handling only graphics and text Suppose, if a user had to play some video, then, a distinct program, plug-in, or an ActiveX control had to be installed. Earlier, Web designers and Web developers used to set up Web pages to play audio and video on the Web using Adobe Flash player. Multimedia is a combination of various elements such as video, graphics, sound, and text. A common way of inserting a multimedia content on Web pages is by embedding a video or audio file in the Web page.
- 4. Multimedia Support Presented by Muhammad Ehtisham Siddiqui (BSCS) 4 Container Video Codec Audio Codec Mp4 H.264 AAC Ogg Theora Vorbis WebM VP8 Vorbis
- 5. Audio in HTML5 Presented by Muhammad Ehtisham Siddiqui (BSCS) 5 The <audio> element will help the developer to embed music on the Web site and allow the user to listen to music. The <audio> element is one of the best features in HTML5. This feature allows the user to enable a native audio file within the Web browser. The <audio> tag specifies the audio file to be used in the HTML document. The src attribute is used to link to the audio file.
- 6. Audio in HTML5(Code) Presented by Muhammad Ehtisham Siddiqui (BSCS) 6 <!DOCTYPE html> <html> <head> <title>audio element</title> </head> <body> <audio src=”d:sourcecodesaudio.mp3” controls autoplay loop> html5 audio not supported </audio> </body> </html>
- 7. Audio Attributes in HTML5 Presented by Muhammad Ehtisham Siddiqui (BSCS) 7 Audio Attributes Description autoplay This attribute identifies whether to start the audio or not once the object is loaded. The attribute accepts a boolean value which when specified will automatically start playing the audio as soon as possible without stopping autobuffer This attribute starts the buffering automatically controls This attribute identifies the audio playback controls that should be displayed such as resume, pause, play, and volume buttons preload This attribute identifies whether the audio has to be loaded when the page loads and is ready to execute. This preload attribute is ignored if autoplay exists src This attribute specifies the location or the URL of the audio file that has to be embedded
- 8. Videos in HTML 5 Presented by Muhammad Ehtisham Siddiqui (BSCS) 8 The <video> element is a new feature added in HTML5. The user can use the <video> element for embedding the video content on the Web page. The easiest way to specify the video is by using the src attribute which give the URL of the video file to be used. Suppose, if the browser does not support the <video> element then the content between the start tag and end tag is displayed on the browser.
- 9. Videos in HTML 5 (Code) Presented by Muhammad Ehtisham Siddiqui (BSCS) 9 <!DOCTYPE HTML> <html> <head> </head> <body> <video src=”D:Source codesmovie.mp4”> Your browser does not support the video. </video> </body> </html>
- 10. Videos in HTML 5 (Code 2) Presented by Muhammad Ehtisham Siddiqui (BSCS) 10 <!DOCTYPE HTML> <html> <head> </head> <body> <video height=“200” width=“200” controls> <source src=”myvideo.mp4” type=”video/mp4”> <source src=”myvideo.webm” type=”video/webm”> <track src=”eng.vtt” label=”English p subtitles” kind=”subtitles” srclang=”en” > </video> </body> </html>
- 11. HTML5 Video Attributes Presented by Muhammad Ehtisham Siddiqui (BSCS) 11 Attribute Description autoplay Specifies that the browser will start playing the video as soon as it is ready muted Allows to mute the video initially, if this attribute is existing controls Allows displaying the controls of the video, if the attribute exists loop Specifies that the browser should repeat playing the existing video once more if the loop attribute exists and accepts a boolean value preload Specifies whether the video should be loaded or not when the page is loaded src Specifies the location of the video file to be embedded
- 12. Questions? Presented by Muhammad Ehtisham Siddiqui (BSCS) 12
Editor's Notes
- #2: Presentation slide for courses, classes, lectures et al.
- #3: Beginning course details and/or books/materials needed for a class/project.
- #4: Beginning course details and/or books/materials needed for a class/project.
- #5: Beginning course details and/or books/materials needed for a class/project.
- #6: Beginning course details and/or books/materials needed for a class/project.
- #7: Beginning course details and/or books/materials needed for a class/project.
- #8: Beginning course details and/or books/materials needed for a class/project.
- #9: Beginning course details and/or books/materials needed for a class/project.
- #10: Beginning course details and/or books/materials needed for a class/project.
- #11: Beginning course details and/or books/materials needed for a class/project.
- #12: Beginning course details and/or books/materials needed for a class/project.
- #13: Example graph/chart.