HTML5+CSS3+JQuery打造自定义视频播放器_html/css_WEB-ITnose

那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。

视频控制按钮
基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在

4. 00:00

打包成jQuery插件
创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下：

1. $.fn.gVideo = function(options) {
2. // build main options before element iteration
3. var defaults = {
4. theme: 'simpledark',
5. childtheme: ''
6. };
7. var options = $.extend(defaults, options);
8. // iterate and reformat each matched element
9. return this.each(function() {
10. var $gVideo = $(this);
12. //create html structure
13. //main wrapper
14. var $video_wrap = $('').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
15. //controls wraper
16. var $video_controls = $('00:00');
17. $gVideo.wrap($video_wrap);
18. $gVideo.after($video_controls);

1. //get newly created elements
2. var $video_container = $gVideo.parent('.ghinda-video-player');
3. var $video_controls = $('.ghinda-video-controls', $video_container);
4. var $ghinda_play_btn = $('.ghinda-video-play', $video_container);
5. var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);
6. var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);
7. var $ghinda_volume = $('.ghinda-volume-slider', $video_container);
8. var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);
10. $video_controls.hide(); // keep the controls hidden

1. var gPlay = function() {
2. if($gVideo.attr('paused') == false) {
3. $gVideo[0].pause();
4. } else {
5. $gVideo[0].play();
6. }
7. };
9. $ghinda_play_btn.click(gPlay);
10. $gVideo.click(gPlay);
12. $gVideo.bind('play', function() {
13. $ghinda_play_btn.addClass('ghinda-paused-button');
14. });
16. $gVideo.bind('pause', function() {
17. $ghinda_play_btn.removeClass('ghinda-paused-button');
18. });
20. $gVideo.bind('ended', function() {
21. $ghinda_play_btn.removeClass('ghinda-paused-button');
22. });

1. var createSeek = function() {
2. if($gVideo.attr('readyState')) {
3. var video_duration = $gVideo.attr('duration');
4. $ghinda_video_seek.slider({
5. value: 0,
6. step: 0.01,
7. orientation: "horizontal",
8. range: "min",
9. max: video_duration,
10. animate: true,
11. slide: function(){
12. seeksliding = true;
13. },
14. stop:function(e,ui){
15. seeksliding = false;
16. $gVideo.attr("currentTime",ui.value);
17. }
18. });
19. $video_controls.show();
20. } else {
21. setTimeout(createSeek, 150);
22. }
23. };
25. createSeek();

1. var gTimeFormat=function(seconds){
2. var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
3. var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
4. return m+":"+s;
5. };
7. var seekUpdate = function() {
8. var currenttime = $gVideo.attr('currentTime');
9. if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
10. $ghinda_video_timer.text(gTimeFormat(currenttime));
11. };
13. $gVideo.bind('timeupdate', seekUpdate);

1. $ghinda_volume.slider({
2. value: 1,
3. orientation: "vertical",
4. range: "min",
5. max: 1,
6. step: 0.05,
7. animate: true,
8. slide:function(e,ui){
9. $gVideo.attr('muted',false);
10. video_volume = ui.value;
11. $gVideo.attr('volume',ui.value);
12. }
13. });
15. var muteVolume = function() {
16. if($gVideo.attr('muted')==true) {
17. $gVideo.attr('muted', false);
18. $ghinda_volume.slider('value', video_volume);
20. $ghinda_volume_btn.removeClass('ghinda-volume-mute');
21. } else {
22. $gVideo.attr('muted', true);
23. $ghinda_volume.slider('value', '0');
25. $ghinda_volume_btn.addClass('ghinda-volume-mute');
26. };
27. };
29. $ghinda_volume_btn.click(muteVolume);