HTML5 introduction, video, and html5 introduction video
HTML5 rules:
Some interesting new features in HTML5:
The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.
Video on the WebUntil now, there is still no standard for displaying videos on webpages.
Today, most videos are displayed through plug-ins (such as Flash. However, not all browsers have the same plug-ins.
HTML5 specifies a standard method to include videos through video elements.
Video FormatCurrently, the video element supports three video formats:
| Format | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5 + | 10.5 + | 5.0 + | No |
| MPEG 4 | 9.0 + | No | No | 5.0 + | 3.0 + |
| WebM | No | 4.0 + | 10.6 + | 6.0 + | No |
Ogg = Ogg file with Theora video encoding and Vorbis Audio Encoding
MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding
WebM = A WebM file with VP8 video encoding and Vorbis Audio Encoding
How to workTo display videos in HTML5, all you need are:
<video src="movie.ogg" controls="controls"></video>
For example, the control attribute is used to add a playback, pause, and volume control.
The content inserted between <video> and </video> is displayed by browsers that do not support video elements:
It is also a good idea to include the width and height attributes.
Use an Ogg file for Firefox, Opera, and Chrome browsers.
Make sure that the video file type is MPEG4 for Safari.
<!DOCTYPE HTML>The video element allows multiple source elements. The source element can be used to link different video files. The browser uses the first recognizable format:
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>Internet Explorer
Internet Explorer 8 does not support video elements. In IE 9, video elements of MPEG4 are supported.
<Video> tag attributes
| Attribute | Value | Description |
|---|---|---|
| Autoplay | Autoplay | If this attribute appears, the video will be played immediately after it is ready. |
| Controls | Controls | If this attribute is displayed, the control, such as the play button, is displayed to the user. |
| Height | Pixels | Set the height of the video player. |
| Loop | Loop | If this attribute is displayed, the media file starts playing again after being played. |
| Preload | Preload | If this attribute is displayed, the video is loaded when the page is loaded and ready for playing. If "autoplay" is used, this attribute is ignored. |
| Src | Url | The URL of the video to be played. |
| Width | Pixels | Set the width of the video player. |
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
