1.多媒体元素的基本属性
1.1元素格式
<video>:用于电影或者其他视频流，
height和width只对该属性有效；
controls:控制视频播放条是否出现，存在于dom中，可以通过js进行访问
poster：设置视频在开始播放前的图片
networkState:可以获取视频加载过程中的各个状态
状态值：
error: 可以获取视频播放的错误信息,使用和networkState相似
<video id="videoId" src="" onError="video_error(this)" controls="true" poster="">
js中：var errorIndex = e.error.code;
<audio>:用于音乐或者其他音频流 controls:控制音乐播放器是否出现
1.2.其他属性
1.2.1 readyState
1.2.2 currentTime startTime duration
currentTime：可读写属性，返回文件的当前播放时间，可以修改该属性使其指向所修改的事件
startTime：只读属性，返回多媒体元素开始播放的事件，默认为0
duration：返回媒体文件总体播放时间，随着播放的进程一直变化
1.2.3 played paused ended
played:可以获取文件已经播放完成的时间段；返回一个TimeRanges对象
paused：返回是否处于暂停状态;
ended: 返回当前文件播放是否已经结束；
<video src=“shipin.mp4” autoplay="true" onPlaying="paying(this)">
js: function paying(e){
alert(e.ended);
}
1.2.4 preload autoplay loop
preload：表示页面打开是否进行预加载；有一下3个可选属性
none：不进行先期播放文件的加载 ；
metadata：表示只加载播放文件基本信息；
auto：表示需要将播放文件进行预加载，默认值是auto；
autoplay：true\false 自动播放
loop： 是否进行循环播放 true/false
1.2.5 defaultPlaybackRate playbackRate
defaultPlaybackRate:返回媒体文件默认的播放速率,默认为1 ；也可以修改该属性值
playbackRate:返回当前播放的文件的播放速率，可以修改，即快进慢进的效果
1.2.6 volume muted
volume:媒体元素播放的音量，范围是0-1
muted ： 是否设置为静音
2.多媒体元素常用方法
1.播放时的方法 load() pause(); play();
2.canPlayType
检测浏览器是否支持该类型文件：
canPlayType(type)返回三个值：
空字符：表示浏览器不支持该类型的媒体文件
maybe：表示浏览器可能支持该类的文件
Probably：表示浏览器支持该类的文件
3.媒体文件的重要事件
1.播放时候的事件
2.timeupdate方法
function progress(e) {
var strCurrTime=RuleTime(Math.floor(e.currentTime/60),2) +":"
+RuleTime(Math.floor(e.currentTime%60),2);
var strEndTime=RuleTime(Math.floor(e.duration/60),2) +":"
+RuleTime(Math.floor(e.duration%60),2);
document.getElementById("spanTimeTip").innerHTML=strCurrTime+"/"+strEndTime;
}
function RuleTime(num,n){
var len= num.toString().length;
while(len<n){
num ="0"+ num;
len++;
}
returnnum;
}
<video id="vdoMain" src="shipin.mp4" autoplay="true" controls="true"
onmouseout="v_move(0)"onmouseover="v_move(1)"
onplaying="v_playing()"onpause="v_pause()"onloadstart="v_loadstart()"
onended="v_ended()"poster="haha.jpg"
style="height:300px;width:400px;"
ontimeupdate="progress(this)">你的浏览器不支持视频</video>
<p>
<span id="spanTip" style="height:40px;width:100px;background-color:#2d2d2d;color:#ffffff;" ></span>
<span id="spanTimeTip" style="height:40px;width:100px;background-color:#2d2d2d;color:#ffffff;"></span>
</p>
3.其他事件
