ok,最后我们来一段通过JavaScript创建并且控制播放Video的代码:
js代码:
$(function(){
// Stop if HTML5 video isn't supported
if (!document.createElement('video').canPlayType) {
$("#video_controls").hide();
return;
}
// 获取video对象
var video = document.getElementById("my_video");
// Play/Pause ============================//
$("#play_button").bind("click", function(){
video.play();
});
$("#pause_button").bind("click", function(){
video.pause();
});
$("#play_toggle").bind("click", function(){
if (video.paused) {
video.play();
$(this).html("Pause");
} else {
video.pause();
$(this).html("Play");
}
});
// 显示播放进度
// Play Progress ============================//
$(video).bind("timeupdate", function(){
var timePercent = (this.currentTime / this.duration) * 100;
$("#play_progress").css({ width: timePercent + "%" })
});
// Load Progress ============================//
$(video).bind("progress", function(){
updateLoadProgress();
});
$(video).bind("loadeddata", function(){
updateLoadProgress();
});
$(video).bind("canplaythrough", function(){
updateLoadProgress();
});
$(video).bind("playing", function(){
updateLoadProgress();
});
function updateLoadProgress() {
if (video.buffered.length > 0) {
var percent = (video.buffered.end(0) / video.duration) * 100;
$("#load_progress").css({ width: percent + "%" })
}
}
// Time Display =============================//
$(video).bind("timeupdate", function(){
$("#current_time").html(formatTime(this.currentTime));
});
$(video).bind("durationchange", function(){
$("#duration").html(formatTime(this.duration));
});
function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds / 60);
// Remaining seconds
seconds = Math.floor(seconds % 60);
// Add leading Zeros
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
});
css代码:
#video_controls {
width: 480px;
height: 30px;
background-color: #333;
color: #fff;
font-family: Verdana, sans-serif;
font-size: 12px;
text-transform: uppercase;
}
#video_controls div {
float: left;
height: 30px;
line-height: 30px;
}
.player-button {
width: 50px;
text-align: center;
cursor: pointer;
}
#progress {
position: relative;
background: #555;
width: 310px;
}
#play_progress {
position: absolute;
background: #6C3;
}
#load_progress {
position: absolute;
background: #69C;
}
#time {
width: 120px;
text-align: center;
}
html代码:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<script src="../_scripts/jquery-1.5.1.min.js"></script>
<script src="player_DONE.js"></script>
<link href="player_DONE.css" rel="stylesheet" type="text/css" />
</head>
<body>
<video id="my_video" width="480" height="300" preload="none" poster="../_video/podcast-poster.jpg">
<!-- 浏览器将按照顺序选取第一个能够解析的源进行播放 -->
<source src="../_video/podcast.mp4" type="video/mp4" />
<source src="../_video/podcast.webm" type="video/webm" />
<source src="../_video/podcast.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<!-- 自定义的播放控制条 -->
<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>
<div id="time">
<span id="current_time">00:00</span> /
<span id="duration">00:00</span>
</div>
</div>
</body>
</html>