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);