天天看点

html5学习(一) video字段

html5对视频的支持:

html5通过<video></video>字段实现web页面上视频的播放功能。

目前各大浏览器对<video>字段的支持:

当前,video 元素支持三种视频格式:

格式

IE

Firefox

Opera

Chrome

Safari

Ogg

No

3.5+

10.5+

5.0+

MPEG 4

9.0+

3.0+

WebM

4.0+

10.6+

6.0+

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

简单的html显示视频的例子

src:指定视频资源的位置(包括相对地址以及绝对地址)。

control 属性供添加播放、暂停和音量控件。

此处注意视频格式

属性

描述

<a href="http://www.w3school.com.cn/html5/att_video_autoplay.asp">autoplay</a>

autoplay

如果出现该属性,则视频在就绪后马上播放。

<a href="http://www.w3school.com.cn/html5/att_video_controls.asp">controls</a>

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

<a href="http://www.w3school.com.cn/html5/att_video_height.asp">height</a>

pixels

设置视频播放器的高度。

<a href="http://www.w3school.com.cn/html5/att_video_loop.asp">loop</a>

loop

如果出现该属性,则当媒介文件完成播放后再次开始播放。

<a href="http://www.w3school.com.cn/html5/att_video_preload.asp">preload</a>

preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

<a href="http://www.w3school.com.cn/html5/att_video_src.asp">src</a>

url

要播放的视频的 URL。

<a href="http://www.w3school.com.cn/html5/att_video_width.asp">width</a>

设置视频播放器的宽度。

方法

事件

play()

currentSrc

play

pause()

currentTime

pause

通过mvideo的play或者pause判断视频是否在播放或者暂停。

继续阅读