Adding Audio and Video Audio and Video on a Web Page Involves Embedding the File Onto Your Web Page
Total Page:16
File Type:pdf, Size:1020Kb
Adding Audio and Video Audio and Video on a web page involves embedding the file onto your web page. The tag used to embed most types of media is the object tag. There are other tags that came out with the early browser and are still recognized by browsers today, such as the bgsound and embed tags. The <object> tag is used to include objects such as images, audio, videos, Java applets, ActiveX, PDF, and Flash. The object element was intended to replace the img and applet elements. However, because of bugs and a lack of browser support this has not happened.The object support in browsers depend on the object type. Unfortunately, the major browsers use different codes to load the same object type. Luckily, the object element provides a solution. If the object element is not displayed, the code between the <object> and </object> tags will be executed. This way we can have several nested object elements (one for each browser). Media Formats The table below describes some of the common audio and video types used. There are many more types than what is described. Format File Description AVI .avi The AVI (Audio Video Interleave) format was developed by Microsoft. AVI files can contain both audio and video data in a file container that allows synchronous audio-with-video playback. AVI files support multiple streaming audio and video, although these features are seldom used. WMV .wmv The Windows Media format is developed by Microsoft. Video or audio file based on the Microsoft Advanced Systems Format (ASF) container format and compressed with Windows Media compression MPEG .mpg The MPEG (Moving Pictures Expert Group) format is the most popular .mpeg format on the Internet. It is cross-platform, and supported by all the most popular web browsers. QuickTime .mov The QuickTime format is developed by Apple. Common multimedia format often used for saving movies and other video files; uses a proprietary compression algorithm developed by Apple Computer RealVideo .rm The RealVideo format was developed for the Internet by Real Media. .ram The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Flash .swf The Flash (Shockwave) format was developed by Macromedia. The .flv Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer. Mpeg-4 .mp4 Movie or video clip that uses MPEG-4 compression, a standard developed by the Moving Picture Experts Group (MPEG); commonly used for sharing video files on the Internet. The MPEG-4 video format uses separate compression for audio and video tracks. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5. MIDI .mid The MIDI (Musical Instrument Digital Interface) is a format for .midi electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Wave .wav The Wave (waveform) format is developed by IBM and Microsoft. It is .midi supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome). MP3 .mp3 MP3 files are actually the sound part of MPEG files. The MPEG format .midi was originally developed for video by the Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system combines good compression (small files) with high quality. Expect future software systems to support it. Background Sounds Audio files can be placed on a web page using different methods. You can apply sound as a background to a web page, or embed it with a controller allowing the visitor to start and stop the music. Some users consider background sounds annoying so be careful when adding them to your site. Think of whom your audience is before adding them. The bgsound tag does not open a control bar for the user to turn off the music, so again know your audience. <bgsound src="musicfilename.mid" loop="5" /> Applied within the heading. The bgsound tag is an Internet Explorer tag that is used to add background music or a greeting to a web page running on Internet Explorer. • src - The audio file to be played. • loop - How many times the sound should repeat. Embed Tags The embed tag is considered by the WC3 to be an outdated tag. The embed tag places a plugin onto the web page to play the media. A plugin is a special program located on the client computer. Unlike other tags, the attributes used by embed tag depend on the type of plugin being used, therefore it has all but been replaced by the object tag which is more consistent and cross-browser compatible. The embed tag should be placed within the body of the document and it will create a control bar for the media file being played. <embed src="rain.mp3" height="16" autostart="0" /> <embed src="train.wmv" autostart="0" width="300" height="150" /> Attributes Attribute Description src Specifies the file name of the media to be played. height & Specifies the height and width that the media should be width displayed. Should be used when displaying video files. Can be set to TRUE or FALSE, or 1 or 0 to indicate whether a autostart media should automatically start playing. type Defines the type of the embedded object. Specifies where to get the plugin software required to play the pluginspage media. pluginurl Specifies where to get the where to get the plugin archive for automatic installation. loop Specifies how many times to play the sound/movie. playcount Defines how many times to play a sound or movie. volume Specifies how loud to play the sound. controller States whether controls should be displayed. starttime Specifies how far into the sound to start and stop. endtime Specifies when to finish playing. Object Tags The object tag is the most cross-browser compatible tag for adding audio and video to a web page. The object tag allows for everything about an objects presentation to be specified. Attribute Value Description left align right Specifies the alignment of the object center A space separated list of URLs to archives. The archives archive URL contains resources relevant to the object. border pixels Defines the border around an object. Specifies the application to be used to display the classid Class ID object. codebase URL Defines where to find the code for the object. The internet media type of the code referred to by the codetype MIME type classid attribute. data URL defines a URL that refers to the object's data. Defines that the object should only be declared, not declare declare created until needed. height pixels Defines the height of an object. Defines a unique name for the object to be used in name identifier scripts. standby text Defines a text to display while the object is loading. Defines the MIME type of data specified in the data type MIME-type attribute. Specifies a URL of a client-size image map to be used usemap URL with the object. vspace pixels Defines the vertical spacing around the object hspace pixels Defines the horizontal spacing around the object Activities 1. Build an html web page using notepad and include the following elements: o The page title should include your first and last name and "Lesson 21 ". o Follow the Lesson 21 Activity Document o Save the pages as directed. 2. Save a copy of your files to your server in WEB >1st 6 WEEKS > LESSON 21 >. 3. FTP/Upload your files to your web server and check its performance in a web browser. .