Audio & Video

1. Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming Audio & Video CHAPTER 6 Prepared by: R. Kansoy

2. Contents 6.1 About Audio and Video Files 6.2 Linking to Audio and Video Files 6.3 Adding Audio 6.4 Adding Video 6.5 HTML <embed> Tag 6.6 Using Youtube to Display Video http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

3. 6.1 About Audio and Video Files • Audio and video files can be added to the webpages by either providing links to the files or by embedding them directly into the HTML pages. • Before the adoption of HTML5, there was no standart for playing audios or showing videos across multiple browsers. They could only be played with a plug-in. • HTML5 offers a new elements, the <audio> and <video>, that does not require a plug-in to play video or audio files. • Most standart browsers used today are supporting both <audio> and <video> elements. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

4. 6.2 Linkig to Audio and Video Files • The most basic way to provide audio and video files to your visitors is to directly link to the related files. • When clicked, the file will open and play in a separeate window. • Just same as with other links, be sure to upload the video or audio file to your Web server to avoid broken links. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

5. 6.3 Adding Audio • There are a few steps necessary when adding or embedding audio into your webpage. • In addition to the <audio> element, you will need to supply a <source> element. • The <source> element in conjuction with the SRC attribute, tells your webpage what audio file to play. • You must also tell your browser the type of file you are linking with the TYPE attribute. • There are currently three major audio file types supported: • MP3 • Wav • Ogg http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

6. 6.3 Adding Audio • It is important to add at least two versions of your file, to increase the likelihood of you users browser being able to play your audio. • You can use multiple source elements within your <audio>..<audio> element to link different files and types. • Your visitors browser will use the first recognized format of your audio file. • The CONTROLS attribute is used to add controls to your audio like volume, play and pause. • There is no value attached to this attribute. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

7. 6.3 Adding Audio • The HTML5 audio tag can have number of attributes to control the look and feel and various functionalities of the control: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

8. 6.3 Adding Audio • The HTML5 audio tag can have number of attributes to control the look and feel and various functionalities of the control: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

9. 6.3 Adding Audio <audio src="/music/myaudio.ogg" autoplay></audio> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

10. 6.4 Adding Video • The <video> tag specifies video, such as a movie clip or other video streams. • Before HTML5, a video could only be played in a browser with a plug-in (like flash). • The HTML5 <video> element specifies a standard way to embed a video in a web page. • Currently, there are 3 supported video formats for the <video> element:MP4, WebM, Ogg • The controls attribute adds video controls, like play, pause, and volume. • The <source> element allows you to specify alternative video files which the browser may choose from. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

11. 6.4 Adding Video http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

12. 6.4 Adding Video <video src="/myvideo.mp4"></video> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

13. 6.5 HTML <embed> Tag • The <embed> tag defines a container for an external application or interactive content (a plug-in). • Plug-ins are computer programs that extend the standard functionality of a web browser. • The <embed> element also defines an embedded object within an HTML document. • The <embed> element can create a container for any audio or video file you choose to link to your web page. Itcan also be used to include HTML in HTML or images if you like. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

14. 6.5 HTML <embed> Tag http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

15. 6.6 Using Youtube to Display Video • The easiest way to display videos on your web page is using a link to YouTube. • You can upload your own videos to a YouTube account or use any other video from YouTube. • This method is easy because you don’t have to worry about file types and browser support. • To use YouTube video, you should just create an iframe and linking your YouTube video as your SRC attribute. • When linking a YouTube video you need to make sure under "Share" you choose the "Embed" option. This will actually give you the proper coding you need, without having to write it yourself. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

16. 6.6 Using Youtube to Display Video http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

17. Thank You ! Audio & Video http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229 END of CHAPTER 6