HTML multimedia and html multimedia

HTML multimedia and html multimedia

1. multimedia introduction

Multimedia on the Web refers to sound effects, music, videos, and animations. Multimedia can be heard or seen in different formats, text, images, music, sound effects, recording, movies, animations, etc. On the Internet, almost all websites can discover multimedia elements embedded in webpages. modern browsers support multiple multimedia formats.

The first generation of browsers only support text, and even the support for text is limited to a single font and a single color. Then, a browser that supports color, Font, and text styles was born, added support for images. Different browsers support sound effects, animations, and videos in different ways. Some elements can be processed in an internal manner, while some require additional plug-ins.

 

2. multimedia format

Multimedia elements (such as audio and video) are stored in media files. The most common method to determine the media type is to view the file extension. For example, when the browser obtains a file extension of. html, it automatically recognizes the file as an HTML page .. The xml extension indicates an XML file, while the. css extension indicates a style table. The image format is identified by. gif or. jpg. Multimedia elements also have file formats with different extensions, such as .mp32.16.mp4,. wmv, And. swf.

　　(1) Audio Format

The most common is music files in mp3 format. MP3 is an Audio compression technology. It is short for dynamic imaging Experts to compress standard Audio layers 3 (Moving Picture Experts Group Audio Layer III ), MP3 is designed to greatly reduce the volume of audio data.

　　The following are six common audio formats:

　　①. MP3 format, file extension. mp3.

An MP3 file is actually the audio part of an MPEG file. MP3 is the most popular audio format for music.

②. WAV format, file extension. wav.

WAV is an audio file format launched by Microsoft. It is the earliest digital audio format and is used to store Audio Information Resources on the Windows platform. It is widely supported by the Windows platform and its applications. WAV is the most lossless music format, which is almost the same as CD. Therefore, the WAV format requires too much storage space for communication and dissemination.

③. WMA format, file extension. wma.

WMA (Windows Media Audio) is superior to MP3 and compatible with most players. Apart from iPod, WMA is also the most common music file format. WMA files can be transmitted as continuous data streams, this makes it very useful for online radio stations or online music.

④. APE format, file extension. ape.

APE is one of the popular formats for lossless compression of digital music. It is a very popular music format. The WAV format is too large, and the APE format is about half of the original CD, so it is easy to store.

⑤. FLAC format, file extension. flac.

FLAC is also one of the popular lossless audio compression formats. Unlike other lossy compression formats such as MP3, FLAC is lossless compression, which means that audio will not lose any information after being compressed in FLAC encoding, it can restore the sound quality of music discs. Currently, the common formats of lossless compression digital music are APE and FLAC.

6. MIDI format, file extension. mid or. midi.

MIDI (Musical Instrument Digital Interface) is a format for electronic music devices (such as synthesizer and Sound Card). MIDI files do not contain sound, but contain can be electronic products (such as sound card) the instruction for playing digital music. The MIDI format contains only commands, so the MIDI file is extremely small. Therefore, MIDI is supported by a large number of software on a wide range of platforms, and most popular browsers support the MIDI format.

　　(2) Video Format

　　MP4 is the most common video playing format. If a movie is often downloaded, it is no stranger to avi1_wmv0000.swf or. flv. 3GP is a format commonly used to play videos on mobile phones. It is a 3G streaming media video encoding format and a simplified version of MP4 format, this reduces storage space and lower bandwidth requirements, allowing limited storage space on mobile phones to be used.

　　The following are five common video formats:

　　①, MP4 format, file extension. mp4.

MP4 (Mpeg-4) is a new video format for the Internet, and is supported by html5.

MPEG (Moving Pictures Expert Group, dynamic image Expert Group) is the most popular format on the Internet. It is cross-platform and supported by all the most popular browsers. MPEG is an organization that develops international standards for motion images and voice compression. It is responsible for audio and video standards. Its file extensions for videos include. mpg.

②. AVI format, file extension. avi.

The AVI (Audio Video Interleave) format is developed by Microsoft. All computers running Windows support the AVI format, which is a common format on the Internet, however, it is not always possible to play a video on a non-Windows computer.

③. Flash format, file extension. swf or. flv.

The Flash format is developed by Macromedia (NASDAQ: MACR). This format requires additional components for playback, but it will be pre-installed in Firefox or IE browsers.

④ RealVideo format. There are four file extensions:. ra,. rm,. ram, And. rmvb.

The RealVideo format is developed by Real Media for the Internet. This format allows video streams (online videos and online TVs) in low bandwidth conditions. due to low bandwidth, the quality is usually reduced.

⑤. QuickTime format, file extension. mov.

The QuickTime format is developed by Apple and is also a common format on the Internet. However, QuickTime movies cannot be played on Windows computers without additional components installed.

 

　　Note: The latest HML5 standard supports MP3, WAV, and Ogg audio formats. video formats only support MP4, WebM, and Ogg formats.

　　OggThe full name is OGG Vorbis, which is a new audio compression format. Vorbis is the name of this audio compression mechanism,The file extension is. ogg.The file format is too difficult to find on the Internet. You can still find the audio file. I have not found any video file, but you can use the Video Converter to convert the format, the magic sound factory and format factory have been downloaded successively, but both support OGG audio file conversion and cannot be converted to OGG video. Fortunately, most browsers support MP4 video files, finally, I downloaded the livemix Video Converter to convert an MP4 file to the WebM format. However, OGG video conversion is also not supported. It is said that Miro Video Converter and Easy HTML5 Video can be used to convert videos in any format to HTML5 Video format. No attempt has been made yet.

　　WebMIt was proposed by Google and is an open and free media file format. The video format is actually a new container format developed based on the Matroska (MKV) container format, it includes the VP8 video track and Ogg Vorbis audio track. The WebM project aims to develop high-quality and open video formats for networks open to everyone.The focus is on solving the core network user experience of video services. The WebM standard video is more open-source and based on the HTML5 standard. The extension is. webm.

 

3. HTML plugin

The function of the plug-in is to expand the functions of the HTML browser. Plug-ins are also known as auxiliary applications and can be started by the browser. The plug-in can be used to play audio, video, and others. The plug-in can be added to the page using the <object> tag or the <embed> tag. Most auxiliary applications allow users to control some or all of the playback settings, such as back, pause, stop, and play.

　　(1), <object> element

<Object> an element defines an object embedded in an HTML document. This label is used to insert an object, such as embedding a Java Applet, a PDF reader, and a Flash player in a webpage. Currently, most mainstream browsers support <object> labels.

Video insertion: <object data = "demo.swf" width = "200" height = "50"> </object>

Firefox does not support using this label to insert videos.

Chrome supports using this label to play videos in Flash format, but it does not have a playback control. This label is not supported by IE.

IE and Chrome support using this label to play MP4 videos. IE8 and earlier versions do not support this label.

 

Or insert an image: <object data = "icon.jpg"> </object>

<Object> elements can be used to include HTML files: <object data = "index.html" width = "100%" height = "500px"> </object>

(2) <embed> Elements

　　The <embed> element defines a container used to embed external applications or plug-ins. Currently, all mainstream browsers support <embed> elements.

Insert video: <embed src = "demo.mp4" width = "480" height = "270">

Firefox requires plug-ins to display this content.

IE and Chrome support using this label to play videos in MP4 format, and IE8 and earlier versions are also supported.

Only Chrome supports using this label to play videos in Flash format, but there is no playback control for direct playback.

 

Or insert an image: <embed src = "icon.jpg">

The scroll bar is displayed in IE, and the image size is displayed in Chrome and Firefox without the scroll bar. IE8 and earlier versions are not supported.

<Embed> elements can also be used to include HTML files: <embed src = "index.html" width = "100%" height = "500px">

IE and Chrome are supported. IE8 and earlier versions are not supported. Firefox needs to install a plug-in to display this content.

 

4. HTML Audio (Audio)

　　Audio can be played in different ways in HTML. It is not easy to play audio on the webpage before HTML5 appears. Make sure that the audio files are in all browsers (IE, Chrome, Firefox, Safari, opera) and all hardware (PC, Mac, iPad, iPhone) can play.

(1) Use plug-ins

The browser plug-in is a small computer program that extends the Standard Functions of the browser. The plug-in can be added to the page using the <object> tag or <embed> tag, these labels define the containers of resources (usually non-HTML resources). They are automatically displayed by the browser and by the external plug-in according to the type.

　　(2) Use the <object> element

　　<Object> A tag can be used to define external content containers. It is mainly used to define an embedded object.An advantage of an object is that for browsers that do not support this element or do not display this element, code located between <object> and </object> is executed. In this way, we can nest Multiple object elements, each corresponding to a browser. Use this element to embed the audio as follows:

<Object data = "audio/hailang logs" width = "300" height = "100"> not supported currently. </Object>

Problems: ①: you can play the video Directly under Chrome. IE restricts the webpage to run scripts or ActiveX controls. Click "Allow to block content" to play the video, however, Firefox does not support this label for inserting audio or ActiveX controls. ②: If the browser does not support the audio format, the audio cannot be played. ③: If the file is converted to another format, it cannot be played in all browsers.

　　(3) Use the <embed> element

　　<Embed> labels can also define external content containers. They are mainly used to define a container for embedding external applications or plug-ins.This is an HTML5 tag.This element does not close the label, so it cannot use alternative text. Use this element to embed the audio as follows:

<Embed src = "audio/willing to accept" width = "300" height = "100"/>

Problems: ① different browsers support different audio formats. ②: Audio cannot be played if the plug-in is not installed on your computer. Although Firefox supports the Ogg format, you still need to install plug-ins to display the content. ③: If the file is converted to another format, it cannot be played in all browsers.

 

　　(4) use HTML5 <audio> Elements

　　<Audio> is a newly added element in html5. it is mainly used to define sounds, such as music or other audio streams,Currently, all mainstream browsers support this label. Use this element to embed the audio as follows:

<Audio src = "audio/ ..wav" controls autoplay> </audio>

Only one audio file can be specified using the <audio> element. For browsers that do not support this format, playback cannot be performed. For example, in the preceding example, IE does not support WAV format. The Player displays an error, audio Playback has been aborted. in IE, You can restrict the webpage to run scripts or ActiveX controls. After you click "Allow to block content", the following message is displayed: error: the audio type is not supported or the file path is invalid, it can be played normally in Chrome and Firefox.

　　<Audio>If the element does not use attributes, the audio cannot be played.In the above example, we can see the player on the page and play it after opening the page, thanks to the following two attributes: controls and autoplay.The controls attribute is used to display the audio control to the user, that is, the player. You can perform this operation on your own, such as playing or pausing the audio. The autoplay attribute specifies that the audio will be played immediately after it is ready. This element also has several important attributes: src specifies the URL of a media file. The loop attribute specifies that playback starts again whenever the audio ends. The muted attribute specifies that the audio output is muted. The preload attribute specifies whether to load audio after the page is loaded. This property has three values: preload ="None |Auto | meta ", when the value is none, it is required that audio will not be loaded after the page is loaded, when the value is auto, it is required that when the page is loaded after loading the entire audio, when the value is meta, requires that only metadata is loaded after the page is loaded.

　　To support audio in all browsers, you can use the <source> tag in the <audio> tag to define audio files in two formats.As follows:

1 <audio controls autoplay> 2 <source src = "audio/ordinary path .ogg" type = "audio/ogg"> 3 <source src = "audio/other party" type = "audio/mpeg "> 4 </audio>

　　<Source>Is a newly added element in HTML5,It defines media resources for media elements (such as <video> and <audio>, this tag allows you to define two browsers for audio/video files to select media types based on their support. The tag has three attributes: the src attribute specifies the URL of the media file, and the type attribute specifies the type of the media element, the medai attribute specifies the type of media resource (which media/device the file is optimized ). The browser uses this attribute to determine whether to download the file, that is, whether the file can be played. If it cannot, it can choose not to download the file. This attribute can accept multiple values, but almost all mainstream browsers currently do not support this attribute.

　　When using the <audio> label,Audio files must be converted to different formats,Make sure that all browsers support this element, but this element is invalid in old-fashioned browsers. For example, IE8 does not support this element, and new versions of IE8 and later can be used.

All browsers support playing audio using mp3 or ogg, But If <audio> elements are not supported, you can use <embed> elements nested in the <audio> tab, however, the <embed> element cannot be rolled back to Display error messages. The compatible code is as follows:

1 <audio autoplay> 2 <source src = "audio/willing to play" type = "audio/mpeg"> 3 <source src = "audio/ordinary road .ogg" type = "audio/ogg"> 4 <embed src = "audio/hailang audio" height = "100" width = "300"> 5 </audio>

In IE8 and earlier browsers, the audio specified in the <embed> element is automatically played. However, IE restricts the webpage to run scripts or ActiveX controls. You need to click Allow to block the content, can be played.

 

Note: all browsers support audio in MP3 format. IE and Safari do not support the Ogg format, whereas Chrome, Firefox, and Opera both support this format.Chrome, Firefox, Safari, andOpera supports WAV format, but IE does not. IE only supports MP3 format.

(5) Use hyperlinks

If a webpage contains a hyperlink to a media file, most browsers use the "plug-in" to play the file. The following is a hyperlink pointing to an MP3 file. When you click this link, the browser starts the "plug-in" to play the file:

<A href = "audio/ .mp3" target = "_ blank"> play music! </A>

In the above Code, after clicking the link in Chrome and Firefox, the browser will start the plug-in to play the audio. After clicking the link in IE (including IE8 and earlier versions), the following message will be displayed: to open or saveXXOf13th audio and video? By default, my computer uses codoy to play music. After you click it to enable codoy to play the audio, click Save to download the audio.

 

5. HTML Video)

Like playing audio in HTML, there are also many ways to play a video on a page. You also need to ensure that the video file can be played in all browsers and on all hardware, you can also use the <object> and <embed> tags to play the video. However, we can say that these two tags are mainly used to define an embedded plug-in, therefore, we do not recommend using these two tags to insert audio or video. It is best to use the <audio> and <video> tags in html5.

　　(1) Use HTML5 <video> Elements

　　<Video> is a newly added element in HTML5. It is mainly used to define videos, such as movie clips or other video streams,Currently, all mainstream browsers support this label. Use this element to embed the video as follows:

<Video src = "video/If you also hear .mp4" width = "320px" height = "240px" controls autoplay> </video>

Only one video file can be specified when you use the <video> element. browsers that do not support this format cannot play the video. When you play the video in IE, IE restricts the running of scripts or ActiveX controls on the web page. Click allow to block content and start playing.

Similarly,<Video>The video cannot be played if the element does not use the attribute..If you specify the video size and forget to specify the playback control and the playback attribute after the video is ready, the Black Block with the specified size will be displayed in the browser. The controls and autoplay attributes specify to display the playback control to the user and play it immediately after it is ready. The src attribute specifies the URL of the video to be played. The width and height attributes are used to set the width and height of the Video Player. Note: you cannot use these two attributes to narrow down the video, which forces the user to download the original video, in real time, it is very small on the webpage. Specifying the height and width of a video is a good habit. If these attributes are set, the video will be reserved during page loading. If these attributes are not set, the browser cannot determine the video size in advance, so that the appropriate space cannot be reserved for the video. The browser automatically defines the display size. As a result, during page loading, its layout will also change, resulting in unexpected results. The loop attribute specifies that playback starts again at the end of a video. The muted attribute specifies that the video frequency output is muted. Preload attribute: If this attribute is displayed, the video is loaded and ready to be played during page loading. If "autoplay" is used, this attribute is ignored. This attribute has three values: preload = "none | auto | meta". When the value is none, it indicates that the page does not load audio/video after loading. When the value is auto, it indicates that audio/video will be loaded after the page is loaded. When the value is meta, it indicates that only the metadata of the audio/video is loaded after the page is loaded.

To support videos in all browsers, you can also use the <source> label in the <video> label to define files in two video formats.As follows:

1 <video width = "320px" height = "240px" controls autoplay> 2 <source src = "video/if you have heard of it too. webm "type =" video/webm "> 3 <source src =" video/prediction .mp4 "type =" video/mp4 "> 4 </video>

　　

Almost all browsers support video playback in MP4 format, but the <video> element is invalid in older browsers. For example, IE8 does not support this element, whereas new versions of IE8 and later can be used. For browsers that do not support <video> elements, you can use <embed> elements nested in the <video> label, but the <embed> element cannot be used to display error messages, you can also use the <object> element. The compatible code is as follows:

1 <video width = "320px" height = "240px" controls autoplay> 2 <source src = "video/advance .mp4" type = "video/mp4"> 3 <source src =" video/if you have heard about it too. webm "type =" video/webm "> 4 <embed src =" video/ .mp4 "width =" 480px "height =" 270px "> 5 </video>

 

(2) Use hyperlinks

You can also use hyperlinks to play a video. If a webpage contains a hyperlink pointing to a media file, most browsers use "ins" to play a file. The following is a hyperlink pointing to an MP4 file. When you click this link, the browser starts the "plug-in" to play the file:

<A href = "video/haole day.mp4"> play a video! </A>

 

In the above Code, after clicking the link in Chrome and Firefox, the browser will start the plug-in to play the video. After clicking the link in IE (including IE8 and earlier versions), the following message will be displayed: to open or saveXXOfHaoleDay.mp4? After you click "open", the default local video player is enabled to play the video. Click "save" to download the video.

(3) Use Youku

If you want to play a video on a webpage, you can also use a video website such as Youku. However, you need to upload the displayed video to Youku first, then insert the video link address into the HTML code using the <embed> tag on the webpage to play back the video. This is the easiest way to display the video on the webpage before HTML5 appears.

 

Note: all browsers support videos in MP4 format,Internet Explorer and Safari do not support Ogg format orWebM format,Chrome and Firefox support bothOgg format is also supportedWebM format,IE only supports MP4 format.

<Video> elements can be controlled using DOM. <video> elements also have methods, attributes, and events.

 

6. inline Media

When you include a media element in a webpage or as a part of a webpage, it is called inline media. When a sound is contained in a webpage, it is called inline audio, when a video is included in a webpage, it is called an inline video.

If you want to use inline media in web applications, you need to be aware that many people think inline media is annoying, such as playing video ads or music after opening a page, in addition, you can disable the inline media option in the browser.

Therefore, we recommend that you only include the inline media content you want to see. For example, when you need to hear a recording or video, click a link to open the page and play the media. To enhance dynamic interaction and enhance user experience, you can play brief sound effects when you move your mouse over specific content to make the page content more vivid.

　　Note: When playing a video file, you must test the file before using it. Otherwise, the file may be displayed on the browser, but only the screen without sound.

　　<Audio> and<Video>All elements support DOM control,<Audio> and<Video>Element Methods, attributes, and events can be operated using JavaScript,The methods can be used for playing, pausing, and loading. The attributes (such as duration and volume) can be read or set. The DOM event can notify us that the <video> element starts to play, has been paused, has been stopped, and so on.

 

7. HTML multimedia tags

　　The <audio> (H5) tag defines sound, such as music or other audio streams.

<Video> (H5) tags define videos, such as videos or other video streams.

The <source> (H5) tag defines media resources for media elements (such as <video> and <audio>, two different audio or video file formats are allowed for browsers that do not support a certain format.

The <track> (H5) label defines external text tracks for media (<video> and <audio>) elements, such as subtitle files or other files containing text. When the media is played, these files are visible.