Video element and audio element

Last Update:2018-10-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Content:

1.video elements

2.audio elements

Note: These two elements are all new elements of HTML5

1.video elements

(1) Use

<video> tag definition videos, such as movie clips or other video streams

(2) Label properties

(3) Example

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">6     <title>Video tag</title>7 </Head>8 <Body>9 Ten <!--AutoPlay has playback control width 600px High 400px - One <Videosrc= "Xxx.mp4"Controls= "Controls"AutoPlay= "AutoPlay"width= "All"Height= "$"> A     <!--The following text is displayed when the browser does not support the video tag - - your browser does not support the video tag - </Video> the  - </Body> - </HTML>

(4) Supplement-source element and encoding format

The source element specifies multiple playback formats and encodings: The source element can specify multiple playback formats and encodings for the same media data to ensure that the browser can select one of its own supported playback formats for playback. Select the order from top to bottom until you select the supported formats. Here's how to use it:

1 <Video>2     <Sourcesrc= "VIDEO.M4V"type= "Video/mp4" />3     <Sourcesrc= "VIDEO.WEBM"type= "VIDEO/WEBM" />4     <Sourcesrc= "VIDEO.OGV"type= "Video/ogg" />5     <Sourcesrc= "Video.mp4" />6 </Video>

Support for encoding formats for various devices:

WEBM (. webm) format Video: Firefox4.0 above, chrome6.0 above, Opera10.6 above;
MP4 (. m4v) format Video: IE9.0 above, Safari3.1 above, iso5.0 above, Android4.0 above;
Ogg (. ogv) format Video: Firefox3.5 above, chrome3.0 above, Opera10.5 above;
MP4 (. mp4) format video: IE9.0 above, Safari3.1 above, iso3.0 above, Android2.3 above;

2.audio elements

(1) Use

<audio> tags define sounds, such as music or other audio streams

(2) Label properties

Preload Property: This property specifies whether to preload the data, and if so, the browser will buffer the video data or audio data, which can speed up playback. Three values for the Preload property:

None means preload is not performed;
Metadata indicates that only the meta-data of the media is preloaded;
Auto (the default value) indicates that all video or audio is preloaded;

(3) Example

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">6     <title>Audio tags</title>7 </Head>8 <Body>9 Ten <!--AutoPlay with playback controls - One <Audiosrc= "Xxx.wav"Controls= "Controls"AutoPlay= "AutoPlay"> A     <!--The following text is displayed when the browser does not support audio tags - - your browser does not support the audio tag - </Audio> the  - </Body> - </HTML>

Video element and audio element

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More