Download presentation
Presentation is loading. Please wait.
1
Client-Side Internet and Web Programming
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
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.
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. Example <!DOCTYPE html> <html> <body> <a href=" My Song </a> </body> </html>
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
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.
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: Attribute Description autoplay This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. muted Specifies that the audio output should be muted controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
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: Attribute Description loop This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. src The URL of the audio to embed. This is optional; you may instead use the <source> element within the audio block to specify the audio to embed.
9
Displays your audio file with controls for user to play the file.
6.3 Adding Audio Example <!DOCTYPE html> <html> <body> <audio controls> <source src="bird.ogg" type="audio/ogg"> <source src="bird.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> Result Displays your audio file with controls for user to play the file. The text will only be displayed in browsers that do not support the <audio> element. <audio src="/music/myaudio.ogg" autoplay></audio>
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.
11
6.4 Adding Video Attribute Description controls loop preload src width
Specifies that video controls should be displayed (such as a play/pause button etc). loop This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end. preload Specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. src The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. width specifies the width of the video's display area. height specifies the height of the video's display area. poster This is a URL of an image to show until the user plays or seeks. autoplay Specifies that the video will start playing as soon as it is ready. muted Specifies that the audio output of the video should be muted.
12
Your browser does not support the video tag.
6.4 Adding Video Example <!DOCTYPE html> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> Result Displays the video, with play, pause and volume controls, in a space 320 pixels wide and 240 pixels high. If the browser does not support the video, the text that you entered will be displayed: Your browser does not support the video tag. <video src="/myvideo.mp4"></video>
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. It can also be used to include HTML in HTML or images if you like. Attribute Description src Specifies the address of the external file to embed type Specifies the media type of the embedded content width Specifies the width of the embedded content height Specifies the height of the embedded content
14
6.5 HTML <embed> Tag
Example <!DOCTYPE html> <html> <body> <embed src="bird.mp3" width="100" height="50"> <embed src="movie.avi" width="320" height="240"> <embed src="helloworld.swf"> <embed width="100%" height="500px" src="itec229.html"> <embed src="flower.jpeg"> </body> </html>
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.
16
6.6 Using Youtube to Display Video
Example <!DOCTYPE html> <html> <body> <iframe width="600" height="400" src=" frameborder="0" allowfullscreen></iframe> </body> </html> Result Displays the video in an iframe 600 pixels wide by 400 pixels high.
17
Thank You ! Audio & Video END of CHAPTER 6
Similar presentations
