html如何添加图像多媒体,HTML5中添加多媒体支持（三）

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代码：

HTML5 Video Player

Your browser does not support HTML5 video.

Play

00:00 /

00:00