这个是记录一下，以后使用的时候好找 Video的常见属性 属性 值 描述 Autoplay Autoplay 视频就绪自动播放 controls controls 向用户显示播放控件 Width Pixels(像素) 设置播放器宽度 Height Pixels(像素) 设置播放器高度 Loop Loop 播放完是否继续播放该视频，循环播放 Preload Proload 是否等加载完再播放 Src url 视频url地址 Poster Imgurl 加载等待的画面图片 Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效 Video的API方法 方法 属性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error 全屏 退出全屏 Webkit (Safari5.1 /Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); Firefox (works in nightly) element.mozRequestFullScreen(); document.mozCancelFullScreen(); W3C 提议 element.requestFullscreen(); document.exitFullscreen(); 属性 说明 audioTracks 返回可用的音轨列表（MultipleTrackList对象） autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对象) controller 返回当前的媒体控制器（MediaController对象） controls 显示播控控件 crossOrigin CORS设置 currentSrc 返回当前媒体的URL currentTime 当前播放的时间，单位秒 (快进快退10秒) defaultMuted 缺省是否静音 defaultPlaybackRate 播控的缺省倍速 属性 说明 duration 返回媒体的播放总时长，单位秒 ended 返回当前播放是否结束标志 error 返回当前播放的错误状态 initialTime 返回初始播放的位置 loop 是否循环播放 mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签) muted 是否静音 networkState 返回当前网络状态 paused 是否暂停 playbackRate 播放的倍速(加速、减速播放) played 当前播放部件已经播放的时间范围(TimeRanges对象) preload 页面加载时是否同时加载音视频 readyState 返回当前的准备状态 seekable 返回当前可跳转部件的时间范围(TimeRanges对象) 属性 说明 seeking 返回用户是否做了跳转操作 src 当前音视频源的URL startOffsetTime 返回当前的时间偏移(Date对象) textTracks 返回可用的文本轨迹(TextTrackList对象) videoTracks 返回可用的视频轨迹(VideoTrackList对象) volume 音量值 Video的常用事件 事件 描述 abort 当音视频加载被异常终止时产生该事件 canplay 当浏览器可以开始播放该音视频时产生该事件 canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 durationchange 当媒体的总时长改变时产生该事件 emptied 当前播放列表为空时产生该事件 ended 当前播放列表结束时产生该事件 error 当加载媒体发生错误时产生该事件 loadeddata 当加载媒体数据时产生该事件 loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件 loadstart 当开始查找媒体数据时产生该事件 事件 描述 pause 当媒体暂停时产生该事件 play 当媒体播放时产生该事件 playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 progress 当获取到媒体数据时产生该事件 ratechange 当播放倍数改变时产生该事件 seeked 当用户完成跳转时产生该事件 seeking 当用户正执行跳转时操作的时候产生该事件 stalled 当试图获取媒体数据，但数据还不可用时产生该事件 suspend 当获取不到数据时产生该事件 timeupdate 当前播放位置发生改变时产生该事件 volumechange 当前音量发生改变时产生该事件 waiting 当视频因缓冲下一帧而停止时产生该事件 audio的常见属性 属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 src url 要播放的音频的 URL。 然后实例演示一下
<!doctype html>
<html>
<head></head>
<body>
<!--<video src="movie.webm" controls="controls">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<hr />
多资源的视频播放
<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
您的浏览器不支持视频标签，还不赶快升级。
</video>-->
<hr />
使用以下VIDEO标签的API<br />
<video src="movie.webm" controls="controls" id="video">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<br />
<button onclick="bofang()">播放</button>
<button onclick="zanting()">暂停</button>
<button onclick="kuaijin()">快进10秒</button>
<button onclick="kuaitui()">快退10秒</button>
<button onclick="shutup(this)">闭嘴</button>
<button onclick="soso()">加速播放</button>
<button onclick="yu()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">提高嗓门</button>
<button onclick="lower()">降低嗓门</button>
<script>
//获取对应的video标签
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暂停方法
function zanting(){
video.pause();
}
//快进10秒
function kuaijin(){
video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
}
//快退10秒
function kuaitui(){
video.currentTime-=10;
}
//静音按钮
function shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//加速播放(3倍速度)
function soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function yu(){
video.playbackRate=1/3;
}
//正常倍速
function normal(){
video.playbackRate=1;//默认的播放倍速是1
}
//调高声音
function upper(){
video.volume+=0.2;//声音值的范围是0-1
}
//调低声音
function lower(){
video.volume-=0.2;
}
</script>
<hr />
音频标签的使用<br />
<audio src="我的好兄弟.mp3" controls="controls">
您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
</audio>
</body>
</html>
欢迎大家一起来学习html5,欢迎大家来转载，转载请注明来自微度网络-网络技术中心http://yun.widuu.com
发表评论 取消回复