尝试了这一点: - http://jsfiddle.net/adiioo7/zu6pK/light/
HTML: -
Your browser does not support the video tag.
JS: -
jQuery(function ($) {
//For adding play pause layer on top on the player
$("#Layer").css({
position: "absolute",
top: $("#video").offset().top,
left: $("#video").offset().left,
width: $("#video").outerWidth(),
height: $("#video").outerHeight()
});
//Switching play/pause image on the player
$("#Layer").on("click", function (e) {
var myVideo = $("#video")[0];
if (myVideo.paused) {
myVideo.play();
$(this).addClass("pause");
} else {
myVideo.pause();
$(this).removeClass("pause");
}
});
//Toggle behaviour for play/pause
$("#video").on("click", function (e) {
var myVideo = $(this)[0];
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
});
//Showing/Hiding layer on top of the player
$("#video").on("mouseenter", function (e) {
$("#Layer").toggle();
});
//Volume bar to control video volume
$("#volume-bar").on("change", function () {
var myVideo = $("#video")[0];
myVideo.volume = $(this).val();
});
//Seek bar to sync with the current playing video
$("#video").on("timeupdate", function () {
var myVideo = $(this)[0];
var value = (100 / myVideo.duration) * myVideo.currentTime;
$("#seek-bar").val(value);
});
//Seek bar drag to move the current playing video at the time.
$("#seek-bar").on("mouseup", function () {
var myVideo = $("#video")[0];
var currentTime = $("#seek-bar").val() / (100 / myVideo.duration);
myVideo.currentTime = currentTime;
});
$("#seek-bar").on("mousedown", function () {
var myVideo = $("#video")[0];
myVideo.pause();
});
});
参考