Use HTML5 to embed audio and video playback in webpages.
HTML5 features, including native audio and video support without Flash.
The HTML5 <audio> and <video> tags make it easy to add media to the site. We only need to set the src attribute to identify media resources, including the controls attribute so that users can play and pause the media.
Embedded Video
The following is the simplest form of embedding a video file on a Web page:
Currently, the draft HTML5 specification does not specify the video format that the browser should support in the video tag. However, the most common video formats are:
Ogg: Ogg file with Thedora Video Encoder and Vorbis Audio Encoder.
Mpeg4: MPEG4 files with H.264 Video Encoder and AAC audio encoder.
You can use the <source> label with media types and other attributes to specify a media file. The video element allows multiple source elements. The browser uses the first accepted format:
Video attribute Specification
HTML5 video tags can use multiple attributes to control the appearance and feeling as well as various control functions:
| Attribute | Description |
|---|---|
| Autoplay | If this Boolean attribute is specified, the video starts to play automatically immediately as long as the data is not stopped. |
| Autobuffer | If this Boolean attribute is specified, the video is automatically buffered even if automatic playback is not set. |
| Controls | If this attribute is specified, the user is allowed to control video playback, including volume control, fast forward, pause, or Resume playback. |
| Height | This attribute specifies the height of the video display area in the form of CSS pixels. |
| Loop | If this Boolean attribute is specified, automatic playback is allowed after the playback ends. |
| Preload | Specify this attribute. The video will be loaded and ready when loading the page. If automatic playback is specified, this parameter is ignored. |
| Poster | This is an image URL that is displayed to the user for playback or fast forward. |
| Src | The URL of the video to be embedded. Optional. You can use the <source> element in the video block to specify the video to be embedded. |
| Width | This attribute specifies the width of the video display area in the form of CSS pixels. |
The current HTML draft specification does not specify the audio format that the browser should support in the audio tag. However, the most common audio formats are ogg, mp3, and wav.
You can use the <source> tag with media types and other attributes to specify a media set. The Audio element allows multiple source elements, and the browser uses the first accepted format:
Copy XML/HTML Code to clipboardAudio attribute Specification
The HTML5 audio tag can use multiple attributes to control the appearance, feeling, and various control functions:
| Attribute | Description |
|---|---|
| Autoplay | If this Boolean attribute is specified, the audio will be automatically played immediately as long as the data loading is not stopped. |
| Autobuffer | If this Boolean attribute is specified, audio buffering starts automatically even if automatic playback is not set. |
| Controls | If this attribute is specified, the user is allowed to control audio playback, including volume control, fast forward, and pause/Resume playback. |
| Loop | If this Boolean attribute is specified, the audio can be automatically played back after the playback ends. |
| Preload | This attribute specifies that the page is loaded and ready. If automatic playback is specified, this parameter is ignored. |
| Src | The URL of the audio to be embedded. Optional. You can use the <source> element in the audio block to specify the audio to be embedded. |
| Event | Description |
|---|---|
| Abort | This event is generated when the playback is aborted. |
| Canplay | This event is generated when enough data is available and the media can play back. |
| Ended | This event is generated when playback is complete. |
| Error | This event is generated when an error occurs. |
| Loadeddata | This event is generated when the first frame of the media is loaded. |
| Loadstart | This event is generated when you start loading media. |
| Pause | This event is generated when the playback is paused. |
| Play | This event is generated when the playback starts or resumes. |
| SS | This event is generated when media download progress is regularly notified. |
| Ratechange | This event is generated when the playback speed changes. |
| Seeked | This event is generated when the fast forward operation is complete. |
| Seeking | This event is generated at the beginning of the fast forward operation. |
| Suspend | This event is generated when media loading is paused. |
| Volumechange | This event is generated when the audio volume changes. |
| Waiting | Request operations (such as playback) are delayed. This event is generated when another operation is completed (such as fast forward. |
Configure the server media type
Most servers do not use the correct MIME type to provide Ogg or mp4 media by default, so we may need to add appropriate configurations.
The Code is as follows: AddType audio/ogg. oga
AddType audio/wav. wav
AddType video/ogg. ogv. ogg
AddType video/mp4. mp4
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
