HTML5—视频插入—video元素的属性、事件与方法

先来两个小问题：

1、目前浏览器是否都支持H5中的video元素？

答：否。IE8及其之前的版本均不支持video元素

2、video支持多少种视频格式？

答：三种。

MP4 - 目前比较主流的视频格式，所有浏览器均支持该格式

OGG - 之前手机端的一种视频格式

WEBM - 目前唯一一个支持超高清格式的视频格式。该方法是谷歌公司新推出

一、在

在

二、

autoplay--自动播放

controls--显示操作面板，如播放/暂停按钮，进度条，音量等

loop--视频循环播放

poster--设置视频播放之前显示的图片，与src属性类似，值为路径

preload--设置视频的缓存情况。共有三个值：

auto：默认值，表示尽快缓存视频。

none：表示不缓存视频。

metadata：只缓存视频的基本信息，如高度，宽度等。

width--设置视频的宽度。

height--设置视频的高度。

另外，video标签之间的文本为浏览器不支持video元素时显示的提示文字

三、video元素的事件与方法

事件：

play--当视频播放的时候触发该事件。

pause--当视频暂停的时候触发该事件。利用该事件可以做出暂停时间的广告效果。

ended--当视频播放结束的时候触发该事件。利用该事件可以做视频顺序播放功能。

error--当视频播放发生错误时触发。如：所请求的视频找不到。

canplay--当视频可播放的时候触发，如：已经缓存的视频部分会触发该事件。

canplaythrough--当整个视频可顺利播放的时候触发。

progress--用于更新视频的下载进度，会周期性触发。

方法：

play()--用于播放视频。

pause()--用于暂停视频。

load()--用于加载视频
canPlayType(type)--判断当前浏览器是否支持当前视频格式，返回值为布尔类型。

模拟视频暂停时的广告效果：

运行效果：

是不是感觉图片萌萌哒，哈哈，请无视，效果达到就好。

属性：

paused--为true,表示视频为暂停状态。
ended--为true,表示视频为结束状态。
duration--返回当前视频的时长,单位为秒。
currentTime--设置或获取视频播放的当前位置。

自定义视频播放器（时间有限，所以仅简要模仿播放/暂停按钮和播放进度条）：

Play

player.css

body{text-align:center;}
header,section,footer,aside,nav,article,figure,figcaption,hgroup{display:block;}
#player{
width:720px;
margin:20px auto;
padding:5px;
background:#999999;
border:1px solid #666666;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
nav{margin:5px 0px}
#buttons{
float:left;
width:85px;
height:20px;
}
#bar{
position:relative;
float:left;
width:600px;
height:16px;
padding:2px;
border:1px solid #cccccc;
background:#eeeeee;
}
#progress{
position:absolute;
width:0px;
height:16px;
background:rgba(0,0,150,0.2);
}

简要模仿视频播放器效果：