給妳看看這段代碼
===================
<!DOCTYPE HTML>
<html>
<head>
<title>html5_video</title>
<meta charset="UTF-8"/>
</head>
<body>
<div>
<video id="video" width="400" height="300" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="check"></div>
<input type="button" id="change" value="播放" />
</html>
<script type="text/javascript">
/*
可以為video添加的事件還有很多，比如：
error 視頻加載時發生錯誤
progress 正在加載視頻時
loadstart 瀏覽器開始加載視頻元素時
volumechange音量被改變時
當然，video自己本身還有壹些事件和屬性
startTime float 開始播放時間
currentTime float 獲取或設定當前視頻的播放時間
duration float 視頻的總播放時長
paused boolean 當前影片是否處於暫停狀態
ended boolean 影片是否已結束
volume int 獲取或設置音量
pause() 使影片暫停
play() 使影片播放
*/
var video = document.getElementById("video");
var check = document.getElementById("check");
var change = document.getElementById("change");
//暫停事件
video.addEventListener("pause", function(){
var msg = "處於暫停狀態，當前播放時間為："+video.currentTime;
check.innerHTML = msg;
});
//播放事件
video.addEventListener("playing", function(){
var msg = "開始播放，從"+video.currentTime+"播放";
check.innerHTML = msg;
});
//正在拖動播放條事件
video.addEventListener("seeking", function(){
var msg = "正在拖動";
check.innerHTML = msg;
});
//拖動播放條結束事件
video.addEventListener("seeked", function(){
var msg = "拖動結束";
check.innerHTML = msg;
});
//視頻結束時
video.addEventListener("ended", function(){
var msg = "視頻已播放完畢，總時長為："+video.duration;
check.innerHTML = msg;
});
change.addEventListener("click", function(){
if(video.paused){
video.play();
change.value = "暫停";
}else{
video.pause();
change.value = "播放";
}
})
</script>