Home  >  Article  >  Web Front-end  >  [HTML5 tutorial]-HTML 5 video

[HTML5 tutorial]-HTML 5 video

黄舟
黄舟Original
2017-02-07 13:32:561495browse

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


Videos on the Web

Until now, there has been no program designed to display videos on web pages Video standards.

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:

[HTML5 tutorial]-HTML 5 video

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = With H.264 video encoding and AAC audio encoding MPEG 4 file

WebM = WebM file with VP8 video encoding and Vorbis audio encoding


How it works

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

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

control properties are used 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 browsers that do not support the video element to display:

实例

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

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

实例

<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 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。


[HTML5 tutorial]-HTML 5 video

以上就是[HTML5教程]-HTML 5 视频的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn