2. ? ?? ???
3. ? ?? ???
4. ? ?? ???
   00:00
5. ? ?? ???
6. ? ?? ?? ?? ?? ?
7. ? ?? ?? ?? ?? ?
8. ? ?? ???

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);
11. ? ?? ?? ?? ?? ??
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
    '); ???????????????????????????????????????????????gVideo.after($video_controls);
Copy code
18. here first It is assumed that you understand jQuery and know how to create a jQuery plug-in, because this is beyond the scope of this article. In the above script, we use jQuery to dynamically create elements of the video control toolbar. Next, in order to bind events, we need to obtain the corresponding Elements:

var $video_container = $gVideo.parent('.ghinda-video-player');

1. var $video_controls = $('.ghinda-video-controls', $video_container);
2. var $ghinda_play_btn = $('.ghinda-video-play', $video_container);
3. var $ghinda_video_seek = $('.ghinda-video-seek', $video_container);
4. var $ghinda_video_timer = $('.ghinda-video-timer', $video_container);
5. var $ghinda_volume = $('.ghinda-volume-slider', $video_container);
6. var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container);
8. $video_controls.hide(); // keep the controls hidden
Copy code
10. Here we get it through className, first hide the toolbar Until all resources are loaded, now implement the play/pause button:

if($gVideo.attr(' paused') == false) {

1. $gVideo[0].pause();??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????>
}
};
$ghinda_play_btn.click(gPlay);
$gVideo.click(gPlay);
$gVideo.bind('play', function() {
??????????? $ghinda_play_btn.addClass('ghinda-paused-button');
} );
$gVideo.bind('pause', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button');
});
$gVideo.bind('ended', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button') ;
});
19. Copy code
Most browsers will provide an independent menu when right-clicking on a video. It also provides video control functions. If the user controls the video through this right-click menu, it will conflict with our custom controls, so in order to avoid this we need to Bind the "play", "pause" and "end" events of the video player itself, process the play/pause button in the event handler function, and control the style of the button.
To create the drag block of the progress bar, we used jQuery UI’s Slider component:

1. var createSeek = function() {
2. if ($gVideo.attr('readyState')) {
3. ? ? ? ? ? var video_duration = $gVideo.attr('duration'); value : 0. range: "min",
4. max: video_duration,
5. animate: true, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????},
6. ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????)(
??????????????????????????? $gVideo.attr("currentTime",ui.value);
?????????????????????????????????????????????????????????>
8. $video_controls.show(); Timeout(createSeek, 150);
9. }
10. };
12. createSeek();
Copy code
14. As you can see, here we wrote a recursive function to determine whether the video is ready by looping and comparing the readyState property of the video. Otherwise, we cannot get the duration of the video and cannot create a slider. When the video is ready, we Initialize the slider and display the control toolbar. Next, we implement the timer function by binding the timeupdate event of the video element:
    
    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));??????????????????????????????????????????????????????????????????;
    12. $gVideo.bind('timeupdate', seekUpdate);
    Copy code
    Here we use the seekUpdate function to get the currentTime attribute value of the video Then call the gTimeFormat function to format and get the current playback time point. As for the volume control control, we still use the Slider component of jQuery UI and then use a custom function to implement the mute and unmute functions:
    
    

    $ghinda_volume.slider({

    1. value: 1,
    2. orientation: "vertical",
    3. range: "min",
    4. max: 1,
    5. step : 0.05,
    6. animate: true,
    7. slide:function(e,ui){
    8. $gVideo.attr('muted',false);
    9. ???????????????????? video_volume = ui.value; ??>
    10. var muteVolume = function() {
    11. if($gVideo.attr('muted')==true) {
    12. $gVideo.attr('muted', false);
    13. $ghinda_volume.slider('value', video_volume);
    15. $ghinda_volume_btn.removeClass(' ghinda-volume-mute');????????????????????????????????????
    } else {
    $ gvideo.attr ('muted', true);
    $ ghinda_volume.slider ('value', '0');
    19. $ ghinda_volume_btn.addclass ('ghinda-volume-mute');
    20. };
    21. }; .click(muteVolume);
    Copy code
    23. Finally, when our own custom video control toolbar is constructed, we need to remove the controls attribute of the
    Okay, our plug-in functions have been completed. The calling method:
    26. $('video').gVideo();
    Copy code
    28. This will apply our plugin to every video element on the page.
        
        Appearance and experience
        Okay, now comes the more interesting part, which is the appearance and experience of the player. After the plug-in function is completed, the style can be easily customized with a little CSS. We will all use CSS3 to implement it.
        First, we add some styles to the main container of the player:
        
        1. .ghinda-video-player {
        2. float: left;
        3. padding: 10px;
        4. border: 5px solid #61625d; * FF1 */
        5. -ms-border-radius: 5px; /* IE future proofing */
        6. -webkit-border-radius: 5px; /* Saf3, Chrome */
        7. border-radius: / #000000); /* FF3.6 */
        8. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); / * SAF4, Chrome * /
        10. Box-Shadow: Inset 0 15px 35px #535353; > Copy code
        Next, we set the left side of the video control toolbar to float so that they are aligned horizontally. Using CSS3 opacity and transitions, we added a very nice floating effect to the play/pause and mute/unmute buttons:
        13. .ghinda-video-play {
        14. ???????????? display: block; ??>
        margin-right: 15px;
        background: url(../images/play-icon.png) no-repeat;
        opacity: 0.7 ; -OUT;/ * IE Future Proofing */
        O-Transition: All 0.2s Ease-in-OUT;/ * Opera */
        -Webkit-Transitude: All 0.2s Ease -in-out; /* Safari and Chrome */

        transition: all 0.2s ease-in-out;

        1. }
        3. .ghinda -paused-button {
        4. background: url(../images/pause-icon.png) no-repeat;
        5. }
        7. . ghinda-video-play:hover { ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????If you carefully read the previous JavaScript code that adds and removes the play/pause button style according to the video playback status (Playing/Paused), you will understand why .ghinda-paused-button should rewrite .ghinda-video-play background property.
           Now it’s the slider’s turn. The implementation of our progress bar and volume control slider uses the Slider component of jQuery UI. This component itself has its own style, which is defined in the css file corresponding to jQuery UI. But in order to keep the appearance of the slider consistent with other controls of the player we rewrite all its styles:
           
           1. .ghinda-video-seek .ui-slider-handle {
           2. width: 15px;
           3. height: 15px;
           4. border: 1px solid #333;
           5. top: -4px;
           7. -moz-border-radius:10px;
           8. -ms-border-radius:10px;
           9. -webkit-border-radius:10px;
           10. ??????? border-radius:10px;???????????????????????????????????????????????????????????????????????????????????????????????????????#d5d5d5);
           11. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
           13. box-shadow: inset 0 -3px 3px #d5d5d5; ui-state-hover {
           14. background: #fff;
           15. }
           17. .ghinda-video-seek .ui-slider-range {
           18. -moz-border-radius:15px;
           19. -ms-border-radius:15px;
           20. -webkit-border-radius:15px;
           21. border-radius:15px;
           22. ???
           23. ????background: #4cbae8;
           24. ????background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
           25. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
           27. box-shadow: inset 0 -3px 3px #39a2ce;
           28. }
           Copy code
           30. At this time, the volume control slider is always displayed next to the volume button. We need to change it to be hidden by default. When the mouse is hovering over the volume button, it will be displayed dynamically. Using transitions to achieve this effect would be a good choice:
               
               1. .ghinda-volume-box { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?s ease-in-out; /* Firefox */
               2. -ms-transition: all 0.1s ease-in-out; /* IE future proofing */
               3. -o-transition: all 0.2s ease-in-out; /* Opera */
               4. -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
               5. transition: all 0.1 s ease-in-out;
               6. }
               8. .ghinda-volume-box:hover { >??????? padding-top: 5px; /* Firefox */ in-out; /* IE future proofing */
               9. -o-transition: all 0.1s ease-in-out; /* Opera */
               10. -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
               11. transition: all 0.1s ease-in-out;
               12. }
               14. . ghinda-volume-box:hover .ghinda-volume-slider {
               15. position: relative;
               16. visibility: visible;
               17. opacity: 1;
               18. }
               Copy code
               20. Using some basic CSS properties and the new properties provided by CSS3, we created a new player appearance, which looks like this:
               22. Custom skin
               23. You may have noticed that we have defined some default options when writing the plug-in. They are theme and childtheme, which can be used when calling the plug-in. Need to easily apply custom skins.
               24. Here is the explanation that theme is a complete set of style definitions for all controls. Childtheme is to rewrite certain styles based on theme. We can specify these two options or one of them at the same time when calling the plug-in:
               $('video').gVideo({
               childtheme:'smalldark'
               });
               30. Copy the code
               We wrote an example skin smalldark, which only rewrites part of the style. The display effect is like this:
               Summary
               Using HTML5 Video, JavaScript and CSS3 are really easy to create a customized video player. Use JavaScript to implement the toolbar function, and leave the appearance and experience to CSS3. We get a powerful and easy-to-customize solution!