<video>标签的属性
- src :视频的属性
- poster:视频封面,没有播放时显示的图片
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制条
- width:视频宽度
- height:视频高度
html 代码
<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象
Media = document.getElementById("media");
Media方法和属性:
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
- Media.error; //null:正常
- Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域,TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
//回放状态
- Media.currentTime = value; //当前播放的位置,赋值可改变位置
- Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
- Media.duration; //当前资源长度 流返回无限
- Media.paused; //是否暂停
- Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
- Media.playbackRate = value;//当前播放速度,设置后马上改变
- Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
- Media.seekable; //返回可以seek的区域 TimeRanges
- Media.ended; //是否结束
- Media.autoPlay; //是否自动播放
- Media.loop; //是否循环播放
- Media.play(); //播放
- Media.pause(); //暂停
//视频控制
- Media.controls;//是否有默认控制条
- Media.volume = value; //音量
- Media.muted = value; //静音
TimeRanges(区域)对象 - TimeRanges.length; //区域段数
- TimeRanges.start(index) //第index段区域的开始位置
- TimeRanges.end(index) //第index段区域的结束位置
//相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
- eventTester("loadstart"); //客户端开始请求数据
- eventTester("progress"); //客户端正在请求数据
- eventTester("suspend"); //延迟下载
- eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
- eventTester("loadstart"); //客户端开始请求数据
- eventTester("progress"); //客户端正在请求数据
- eventTester("suspend"); //延迟下载
- eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
- eventTester("error"); //请求数据时遇到错误
- eventTester("stalled"); //网速失速
- eventTester("play"); //play()和autoplay开始播放时触发
- eventTester("pause"); //pause()触发
- eventTester("loadedmetadata"); //成功获取资源长度
- eventTester("loadeddata"); //
- eventTester("waiting"); //等待数据,并非错误
- eventTester("playing"); //开始回放
- eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
- eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
- eventTester("seeking"); //寻找中
- eventTester("seeked"); //寻找完毕
- eventTester("timeupdate"); //播放时间改变
- eventTester("ended"); //播放结束
- eventTester("ratechange"); //播放速率改变
- eventTester("durationchange"); //资源长度改变
- eventTester("volumechange"); //音量改变
注意:currentTime属性在谷歌浏览器上使用时视频路径必须是http...的远程路径,否则currentTime无效;
在火狐浏览器上正常
案例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#video{
width: 700px;
height: 500px;
margin: 0 auto;
background-color: #93ffc5;
}
#mp4par{
width: 500px;
height: 500px;
position: relative;
background-color: #000000;
float: left;
overflow: hidden;
}
#mp4{
width: 500px;
height: 500px;
position: relative;
}
#controls{
position: absolute;
width: 500px;
height: 90px;
bottom: -90px;
background-color: rgba(235, 235, 235, 0.54);
transition: all 0.3s linear;
z-index: 10;
}
#mp4par:hover #controls {
bottom: 0;
}
#btntime{
width: 500px;
}
#btnsound{
position: relative;
top: 5px;
}
button{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #acecff;
color: #ff4c94;
font-size: 13px;
text-align: center;
line-height: 50px;
border-style: none;
outline: none;
}
</style>
</head>
<body>
<div id="video">
<div id="mp4par">
<video id="mp4" src="MP4/high.mp4"></video>
<div id="controls">
<input type="range" id="btntime" value="0" max="100"/><br/>
<button id="start">播放</button>
<button id="btngo">快进</button>
<button id="btnback">快退</button>
<button id="btns">静音</button>
<input type="range" id="btnsound" value="0" max="100"/>
<button id="big">全屏</button>
<button>下载</button>
</div>
</div>
</div>
<script>
var start = document.getElementById("start");
var video = document.getElementById("mp4");
var btntime = document.getElementById("btntime");
var btngo = document.getElementById("btngo");
var btnback = document.getElementById("btnback");
var btns = document.getElementById("btns");
var btnsound = document.getElementById("btnsound");
var big = document.getElementById("big");
var time1;
var time2;
//视频回放时执行
video.onplaying=function(){
var alltime=this.duration;//duration 返回当前音频/视频的长度,以秒计。
btntime.setAttribute("max",alltime);//创建或改变某个新属性。
};
//视频播放位置发生变化的时候执行
video.ontimeupdate = function () {//ontimeupdate 播放时间改变事件
btntime.value = this.currentTime;//currentTime 当前播放的位置,赋值可改变位置
};
//拖动进度条
btntime.addEventListener("mousedown",function(){
video.pause();
this.onmousemove=function(){
video.currentTime=this.value;
};
this.onmouseup=function(){
video.play();
this.onmousemove=null;
this.onmouseup=null;
}
});
btngo.addEventListener("click",function(){
clearInterval(time2);
start.innerHTML="播放";
video.pause();
time1= setInterval(function () {
video.currentTime += 5;
}, 1000);
});
btnback.addEventListener("click",function(){
clearInterval(time1);
start.innerHTML="播放";
video.pause();
time2 = setInterval(function () {
video.currentTime -= 5;
if (video.currentTime <= 0) {
video.play();
clearInterval(time1);
clearInterval(time2);
}
}, 1000);
});
//静音
btns.addEventListener("click",function(){
video.muted=!video.muted; //muted静音
});
//音量进度条
btnsound.addEventListener("mousedown",function(){
this.onmousemove=function(){
video.volume=this.value/100;
};
this.onmouseup = function () {
this.onmousemove = null;
this.onmouseup = null;
}
});
//全屏
big.addEventListener("click",function(){
if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}
if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
}
if (video.msRequestFullScreen) {
video.msRequestFullScreen();
}
if (video.RequestFullScreen) {
video.RequestFullScreen();
}
});
//播放与暂停
start.addEventListener("click",function(){
if(this.innerHTML=="播放"){
video.play();
this.innerHTML="暂停";
clearInterval(time1);
clearInterval(time2);
}
else{
video.pause();
this.innerHTML="播放"
}
});
</script>
</body>
</html>