web video
2487 ワード
index.html
javascript:
<!DOCTYPE html>
<html>
<head>
<title>videohtml5</title>
</head>
<body>
<div id="videos">
<video id="video" controls autoplay preload="auto" src="js/1.mp3" poster="http://a.hiphotos.baidu.com/ting/pic/item/cf1b9d16fdfaaf51d4f1d3ba8e5494eef01f7aa0.jpg"> </video>
<div id="error">
<span id="videoerror"></span>
<span id="videostat"></span>
</div>
</div>
</body>
<script src="js/jquery1.0.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>javascript:
/**
* Created by ji on 13-12-18.
*/
$(document).ready(function(){
var video =document.getElementById("video");
$("#video").css({
"width":"160px",
"height":"160px"
});
var videostat=document.getElementById("videostat");
video.addEventListener("error",function(){
var error=video.error;
switch (error.code){
case 1:
$("#videoerror").innerHTML="download stopped!";
break;
case 2:
$("#videoerror").innerHTML="network error ..";
break;
case 3:
$("#videoerror").innerHTML="code explain error";
break;
case 4:
$("#videoerror").innerHTML="media type cannot be supported!";
break;
default :
$("#videoerror").innerHTML="media type cannot be supported!";
break;
}
},
false
)
video.addEventListener("timeupdate",function(e){
videostat.innerText="loading... already load["+ e.loaded+"];total:["+ e.total+"]" ;
if(video.networkState==3){
$("#videostat").innerText="loaded failed!";
}
},
false)
}
)