HTML 5 video

Source: Internet
Author: User
Document directory
  • Instance
  • Instance
HTML5 web video

 

Until 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 Format
Currently, the video element supports two video formats:

Internet Explorer Firefox 3.5 opera 10.5 chrome 3.0 safari 3.0
Ogg x
MPEG 4 x

Ogg = Ogg file with thedora video encoding and Vorbis Audio Encoding

MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding

How to work
To display videos in HTML5, all you need are:

<Video src = "movie.ogg" controls = "controls">
</Video>

 

The control attribute allows you to add playback, pause, and volume controls.

It is also a good idea to include the width and height attributes.

The content inserted between <video> and </video> is displayed by browsers that do not support video elements:

 

 

Instance

 

<Video src = "movie.ogg" width = "320" Height = "240" controls = "controls">
Your browser does not support the video tag.
</Video>

 

 

The above example uses an Ogg file, which is applicable to Firefox, opera, and chrome browsers.

Make sure that the video file type is MPEG4 for safari.

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:

Instance <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
If this attribute is displayed on autoplay, the video is played immediately after it is ready.
If this attribute is displayed in controls, a control, such as a play button, is displayed to the user.
Height pixels sets the height of the video player.
If this attribute appears in loop, the media file starts playing again after being played.
If this attribute is displayed in preload, the video is loaded and ready to be played during page loading.

If "autoplay" is used, this attribute is ignored.
 
The URL of the video to be played.
Width pixels: Specifies the width of the video player.

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.