html5 video 控件样式,HTML5自定义视频控件(HTML5 custom video controls)

尝试了这一点： - 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();

});

});

参考