HTML audio and video, HTML audio and video

HTML audio and video, HTML audio and video
Directory [1] media format audio format video format [2] element plug-in element HTML5 element [3] HTML audio [4] Before HTML video

Multimedia elements (such as videos and audios) are stored in media files. The most common method to determine the media type is to view the file extension. For example, .swf0000.wmv0000.mp30000.mp4

 

Media format audio format

. Mid/. midi

MIDI (Musical Instrument Digital Interface) is a format for electronic music devices (such as synthesizer and sound card. MIDI files do not contain audio, but contain Digital Music commands that can be played by electronic products (such as sound cards. The MIDI format contains only commands, so the MIDI file is extremely small. Most popular Web browsers support MIDI

. Rm/. ram

The RealAudio format is developed by Real Media for the Internet. This format also supports videos. This format allows audio streams (online music and online music) at low bandwidth ). Low bandwidth leads to low quality

. Wav

Wave (waveform) format is developed by IBM and Microsoft. All computers running Windows and all Web browsers (except Google Chrome) support it.

. Wma

WMA format (Windows Media Audio), superior quality to MP3, compatible with most players, except iPod. WMA files can be transmitted as continuous data streams, which makes it very useful for network radio stations or online music.

. Mp3/. mpga

An MP3 file is actually the audio part of an MPEG file. The MPEG format was initially developed by the Motion Image expert group. MP3 is the most popular audio format for music.

 

Video Format

. Avi

The AVI (Audio Video Interleave) format is developed by Microsoft. All computers running Windows support the AVI format.

. Wmv

The Windows Media Format is developed by Microsoft. Windows Media is common on the Internet. However, if no additional components are installed, Windows Media movies cannot be played.

. Mpg/. mpeg

The Moving Pictures Expert Group is the most popular format on the Internet. It is cross-platform and supported by all the most popular browsers.

. Mov

The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on Windows computers without a quota component installed.

. Rm/. ram

The RealVideo format is developed by Real Media for the Internet. This format allows video streams (online videos and network TVs) at low bandwidth. Low bandwidth leads to low quality

. Swf/. flv

Flash (Shockwave) format is developed by Macromedia. Shockwave format requires additional components for playing

. Mp4

Mpeg-4 (with H.264 video compression) is a new format for the Internet. More and more video publishers use it as the Internet sharing format of Flash players and HTML5.

 

Element plug-in element

<Embed>

Used to define embedded content, such as flash plug-ins

[Note] Because mobile devices have poor support for browser plug-ins such as flash, and IOS devices do not support it at all, flash is not recommended. If you need to play audio and video, you can use video and audio to call the browser's native player.

[Attribute]

Height setting height width of embedded Content Setting width of embedded content src setting URLtype of embedded Content Setting type of embedded content

<embed src="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

 

<Object>

Define an embedded object

<Backup content mechanism>

Objects can be nested with objects or other elements. If the browser cannot render the prepaid content, the backup content is displayed.
[Attribute]

Height setting the height width of the embedded object set the width of the embedded object type set the type name of the embedded object set the name of the object, in the script, you can use data to set the URLusemap of the object to set one or more forms of the client image ing that are used together with the object. need to send data to the server by the plug-in) typemustmatch checks whether the resource type and type attributes are consistent (when both data and type are set)

 

<Param>

Used to pass parameters to embedded plug-ins

[Attribute]

Name: the name of the parameter value specifies the value type of the parameter. The MIME type of the parameter valuetype specifies the MIME type of the specified value (data/ref/object)

<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">　　<param name="SRC" value="bookmark.swf">　　<embed src="bookmark.swf" width="400" height="40"></embed></object>

 

HTML5 Elements

Two media-related tags are added to HTML5, allowing developers to embed cross-browser audio and video content on webpages without relying on any plug-in, these two labels are <audio> and <video> and are not supported by IE8-browser.

The two tags support the following types:

Video [1] video/ogg [2] video/mp4 [3] video/webm

Audio [1] audio/ogg [2] audio/mpeg

For more information about the <audio> and <video> labels, see

 

HTML audio

There are many ways to play audio in HTML.

[1] <embed>

<embed  height="80" width="300" src="song.mp3" />

[2] <object>

<object height="80" width="300" data="song.mp3"></object>

[3] <audio>

<audio controls="controls">  <source src="song.mp3" type="audio/mp3" /></audio>

[4] <a>

<a href="song.mp3">Play the sound</a>

[5] Better solutions

<audio controls="controls" height="100" width="100">    <source src="song.mp3" type="audio/mp3" />    <embed height="100" width="100" src="song.mp3" /></audio>

 

HTML video

There are also many ways to play videos in HTML

[1] <embed>

<embed  height="240" width="320" src="movie.mp4" />

[2] <object>

<object height="240" width="320" data="movie.mp4"></object>

[3] <video>

<video controls="controls">  <source src="movie.mp4" type="video/mp4" /></video>

[4] <a>

<a href="movie.mp4">Play the video</a>

[5] Better solutions

<video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.mp4" width="320" height="240" />  </object></video>