HTML5 Tutorial-Video

Hello everyone, HTML5 is a huge leap forward in Web front-end development in the past ten years. Unlike previous versions, HTML 5 is not just used to represent Web content. Its new mission is to bring the Web into a mature application platform. On the HTML 5 platform, video, audio, images, animations, and computer-based Interactions are standardized.

Next, I will introduce to you the HTML5 tutorial-video.

Many trendy websites offer videos. HTML5 provides a standard for displaying video.

Videos on the Web

Until now, there was no standard for displaying videos on web pages.

Today, most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video through the video element.

Video format

Currently, the video element supports three video formats:

Ogg: with Theora video encoding and Vorbis audio encoding Ogg file;

MPEG4: MPEG 4 file with H.264 video encoding and AAC audio encoding;

WebM: WebM file with VP8 video encoding and Vorbis audio encoding.

How it works

To display a video in HTML5, all you need is: The

<video src=”movie.ogg” controls=”controls”>
</video>

control attribute to add play, pause, and volume controls.

It's also a good idea to include width and height attributes.

The content inserted between is for display by browsers that do not support the video element:

Example:

<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</video>

Above The example uses an Ogg file and is suitable for Firefox, Opera and Chrome browsers.

To ensure that it works with Safari, the video file must be of MPEG4 type.

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognized format:

Example:

<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 the video element. In IE 9, there will be support for the video element using MPEG4.

The above is the content of HTML5 tutorial-video. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!