HTML5 video 标签的部分操作
<!DOCTYPE HTML>
<html
lang="en-US">
<head>
<meta
charset="UTF-8">
<title></title>
<script
type="text/javascript"
src="js/jquery-1.8.3.js"></script>
<script
type="text/javascript">
$(function(){
var video = document.getElementById("video");
alert("duration："+video.duration+",volume:"+video.volume);
$("#btnPlay").click(function(){
video.volume = 0.5;
video.play();
var time = setInterval(function(){
$("#btnTime").val("剩余时间是："+Math.ceil(video.duration-video.currentTime)+"
秒");
},1);
var intval = setInterval(function(){
if(video.ended){
clearInterval(intval);
clearInterval(time);
alert("视频播放完毕");
}
},1);
});
$("#btnPause").click(function(){
video.pause();
});
$("#btnMute").click(function(){
video.muted = true;
});
$("#btnCurrentTime").click(function(){
alert("当前播放了："+video.currentTime+"
秒");
});
});
</script>
<style
type="text/css">
video{cursor:pointer;}
</style>
</head>
<body>
<video src="Moo-O.mp4" id="video" controls>
</video>
<input type="button" value="播放"
id="btnPlay" />
<input type="button" value="暂停"
id="btnPause"/>
<input type="button" value="静音"
id="btnMute"/>
<input type="button" value="播放时间"
id="btnCurrentTime" />
<input type="button"
value="剩余时间" id="btnTime" />
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
