Ignore:
Timestamp:
11/19/12 18:52:32 (7 years ago)
Author:
kent1
Message:

Une manière plus propre pour jouer avec les raccourcis claviers, du coup cela ne rentre plus en conflit avec ceux du squelette de documentation

On passe la souris sur la vidéo ou le son, cela donne le focus à son parent (.media_wrapper) sur lequel on applique les raccourcis claviers

Cela simplifie pas mal le code d'ailleurs

On fini d'améliorer le seek aussi sur le slider, on utilise ms_seek_to en se basant sur le positionnement de la souris parce que de temps en temps, voir même souvent, le click sur la barre ne fonctionnait pas et c'est gênant

File:
1 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/html5/trunk/javascript/mediaspip_player.js

    r7158 r7159  
    9191        window.fullScreenApi = fullScreenApi;
    9292       
    93         var media_hover = false,
    94                 slider = (typeof($.ui) == 'object') && (typeof($.ui.slider) == 'function'),
     93        var slider = (typeof($.ui) == 'object') && (typeof($.ui.slider) == 'function'),
    9594                cookies = (typeof($.cookie) == 'function'),
    9695                stop_message_timeout = false,
     
    383382                                       
    384383                                        wrapper.mousemove(function(e){
    385                                                 media_hover = $(this).find('audio,video');
    386384                                                if(id.isFullScreen && !id.paused){
    387385                                                        if ((e.timeStamp - last_moved > 1000) && ((e.clientX != clientx) || (e.clientY != clienty))) {
     
    409407                                                        media.ms_play_pause();
    410408                                                });
    411                
     409                                               
    412410                                                control.find('.progress_back').click(function(e){
    413                                                         media.ms_seek_to(e.clientX,slider);
     411                                                        if(!slider)
     412                                                                media.ms_seek_to(e.clientX,slider);
    414413                                                });
    415414                                               
     
    538537                                                range: "min",
    539538                                                start: function(event,ui){
    540                                                         if(!id.paused && !id.ended){
    541                                                                 id.pause();
    542                                                                 replay = true;
    543                                                         }else replay = false;
    544539                                                },
    545540                                                slide: function(event,ui){
     
    557552                                                         * On saute la lecture au bon endroit ?
    558553                                                         */
    559                                                         media.ms_seek_to_percent(ui.value,true,false);
    560                                                         if(replay) id.play();
     554                                                        media.ms_seek_to(event.clientX,true,false);
    561555                                                }
    562556                                        });
     
    609603                                id.play();
    610604                        }
     605                        $(this).parents('.media_wrapper').attr("tabindex",-1).hover(function(){
     606                                $(this).focus();
     607                        });
     608                        $(this).parents('.media_wrapper').keydown(function(e) {
     609                                $(this).unbind('keyup').keyup(function(e){e.stopPropagation();e.preventDefault();}).ms_activate_keys(e);
     610                        });
    611611                        this.trigger('start');
    612612                },
     
    713713                 * Utilisée lors d'un click sur la barre de progression
    714714                 *
    715                  * Prends un arguments :
     715                 * Prends deux arguments :
    716716                 * - La position du curseur de la souris lors du click sur la barre de progression
     717                 * - slider : si on a ou non les sliders d'activé
    717718                 */
    718                 ms_seek_to : function(cursor_position,slider){
     719                ms_seek_to : function(cursor_position){
    719720                        var was_playing = false,
    720721                                control = $(this).parent().find('.controls'),
    721722                                progress = control.find('.progress_back'),
    722                                 percent = Math.floor((cursor_position-progress.offset().left / progress.width()) * 100),
     723                                percent = Math.floor(((parseInt(cursor_position)-parseInt(progress.offset().left))/ parseInt(progress.width())) * 100),
    723724                                time = Math.floor(($(this)[0].duration * percent) / 100),
    724725                                time_affiche = ms_second_to_time(time);
    725726                       
    726                         if(!$(this)[0].paused){
    727                                 was_playing = true;
    728                                 $(this)[0].pause();
    729                         }
    730                        
    731                         if(!slider){
     727                        if(typeof($(this)[0].slider_control) != "object"){
    732728                                control.find('.progress_elapsed_time').css('width',percent+'%');
    733729                                control.find('.progress_indicator').css('left',percent+'%');
    734730                        }
    735                        
    736                         $(this)[0].currentTime = time;
    737731                       
    738732                        if($(this)[0].currentTime > time)
     
    740734                        else
    741735                                $(this).ms_messages('seek_to',ms_player_lang.statut_seek_to+' '+time_affiche);
    742                         if(was_playing){
    743                                 $(this)[0].play();
    744                         }
     736                       
     737                        $(this)[0].currentTime = time;
    745738                },
    746739                /**
     
    754747                 * - update_slider boolean true/false : doit on mettre à jour le slider (pas utile quand on vient du slider justement);
    755748                 */
    756                 ms_seek_to_percent : function(percent,slider,update_slider){
    757                         var duration = $(this)[0].duration, currenttime = $(this)[0].currentTime;
     749                ms_seek_to_percent : function(percent,update_slider){
     750                        var duration = $(this)[0].duration,
     751                                currenttime = $(this)[0].currentTime;
    758752                       
    759753                        if(((currenttime == duration) && (percent == 100)) || ((currenttime == 0) && (percent == 0)))
    760754                                return false;
    761755                       
    762                         var time = (percent == 0) ? 0 : ((duration * percent) / 100);
    763                        
    764                         $(this)[0].currentTime = time;
    765                         var time_affiche = ms_second_to_time(time);
     756                        var time = (percent == 0) ? 0 : ((duration * percent) / 100),
     757                                time_affiche = ms_second_to_time(time);
     758                       
    766759                        if(currenttime > time)
    767760                                $(this).ms_messages('seek_back',ms_player_lang.statut_seek_back+' '+time_affiche);
    768761                        else
    769762                                $(this).ms_messages('seek_to',ms_player_lang.statut_seek_to+' '+time_affiche);
    770                         if(!slider){
     763                       
     764                        $(this)[0].currentTime = time;
     765                       
     766                        if(typeof($(this)[0].slider_control) != "object"){
    771767                                var control = $(this).parent().find('.controls');
    772768                                control.find('.progress_elapsed_time').css('width',percent+'%');
    773769                                control.find('.progress_indicator').css('left',percent+'%');
    774                         }else if(update_slider && typeof($(this)[0].slider_control) == 'object'){
     770                        }else if(update_slider){
    775771                                $(this)[0].slider_control.slider("value", percent);
    776772                        }
     
    792788                                container.removeClass('loop');
    793789                                $(this).ms_messages('unloop',ms_player_lang.statut_unloop);
    794                                 console.log($(this)[0].loop);
    795790                                if (typeof($(this)[0].loop) == 'boolean')
    796791                                        $(this)[0].loop = false;
     
    10071002                                $(this).parent().find('.progress_buffered').css('width',percent_loaded+'%');
    10081003                        }
    1009                 }
    1010         });
    1011        
    1012         /**
    1013          * Quelques évÚnements à la pression de touches sur le clavier
    1014          * -* esc : sort du fullscreen
    1015          * -* f : passe en fullscreen sur la video en lecture ou sur celle en hover/focus
    1016          * -* l : active ou désactive la lecture en boucle
    1017          * -* space : lance la lecture d'une vidéo ou la met en pause
    1018          * -* flÚches haut et bas : augmente ou baisse le volume
    1019          * -* flÚches gauche et droite : recule ou avance la lecture de 5%
    1020          */
    1021         $(document).keydown(function(e) {
    1022                 var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
    1023                 if(!meta_key_pressed){
    1024                         switch (e.keyCode) {
    1025                                 case 27 :
    1026                                         /**
    1027                                      * Touche esc
    1028                                      * Sort du mode fullscreen (uniquement sur videos)
    1029                                      */
    1030                                         $('video').each(function(){
     1004                },
     1005                /**
     1006                 * Quelques évÚnements à la pression de touches sur le clavier
     1007                 * -* esc : sort du fullscreen
     1008                 * -* f : passe en fullscreen sur la video en lecture ou sur celle en hover/focus
     1009                 * -* l : active ou désactive la lecture en boucle
     1010                 * -* space : lance la lecture d'une vidéo ou la met en pause
     1011                 * -* flÚches haut et bas : augmente ou baisse le volume
     1012                 * -* flÚches gauche et droite : recule ou avance la lecture de 5%
     1013                 */
     1014                ms_activate_keys : function(e){
     1015                        var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
     1016                        if(!meta_key_pressed){
     1017                                switch (e.keyCode) {
     1018                                        case 27 :
     1019                                                /**
     1020                                             * Touche esc
     1021                                             * Sort du mode fullscreen (uniquement sur videos)
     1022                                             */
    10311023                                        if (!fullScreenApi.supportsFullScreen) {
    1032                                                 if($(this)[0].isFullScreen){
    1033                                                         $(this).ms_fullscreen();
     1024                                                if($(this).find('video')[0].isFullScreen){
     1025                                                        $(this).find('video').ms_fullscreen();
    10341026                                                        e.preventDefault();
    10351027                                                }
    10361028                                        }
    1037                                 });
    1038                                         break;
    1039                                 case 70 :
    1040                                         /**
    1041                                      * Touche f
    1042                                      * Active le fullscreen sur la video en lecture ou la video en hover/focus (uniquement sur videos)
    1043                                      */
    1044                                         $('video').each(function(){
    1045                                         if(!$(this)[0].isFullScreen && ($('input:focus,textarea:focus').size() == 0)){
    1046                                                 $(this).ms_fullscreen();
     1029                                                break;
     1030                                        case 70 :
     1031                                                /**
     1032                                             * Touche f
     1033                                             * Active le fullscreen sur la video en lecture ou la video en hover/focus (uniquement sur videos)
     1034                                             */
     1035                                        if(!$(this).find('video')[0].isFullScreen && ($('input:focus,textarea:focus').size() == 0)){
     1036                                                $(this).find('video').ms_fullscreen();
    10471037                                                e.preventDefault();
    10481038                                        }
    1049                                 });
    1050                                         break;
    1051                                 case 76 :
    1052                                         /**
    1053                                      * Touche l
    1054                                      * Active ou désactive le mode boucle (loop) sur le média en cours de lecture
    1055                                      */
    1056                                         if(media_hover && $('input:focus,textarea:focus').size() == 0){
    1057                                                 media_hover.ms_loop();
    1058                                         e.preventDefault();
    1059                                         }
    1060                                         break;
    1061                                 case 77 :
    1062                                         /**
    1063                                      * Touche M
    1064                                      * Mute ou unmute
    1065                                      */
    1066                                         if(media_hover && $('input:focus,textarea:focus').size() == 0){
    1067                                         media_hover.parents('.media').find('.volume_button').click();
    1068                                         e.preventDefault();
    1069                                         }
    1070                                         break;
    1071                                 case 32 :
    1072                                          /**
    1073                                       * Touche Space
    1074                                       * Lance la lecture ou met le media en pause
    1075                                       */
    1076                                         if(media_hover){
    1077                                         if(media_hover[0].isFullScreen||($('input:focus,textarea:focus').size() == 0)){
    1078                                                 media_hover.ms_play_pause();
     1039                                                break;
     1040                                        case 76 :
     1041                                                /**
     1042                                             * Touche l
     1043                                             * Active ou désactive le mode boucle (loop) sur le média en cours de lecture
     1044                                             */
     1045                                                if($('input:focus,textarea:focus').size() == 0){
     1046                                                        $(this).find('video,audio').ms_loop();
     1047                                                e.preventDefault();
     1048                                                }
     1049                                                break;
     1050                                        case 77 :
     1051                                                /**
     1052                                             * Touche M
     1053                                             * Mute ou unmute
     1054                                             */
     1055                                                if($('input:focus,textarea:focus').size() == 0){
     1056                                                $(this).find('.volume_button').click();
     1057                                                e.preventDefault();
     1058                                                }
     1059                                                break;
     1060                                        case 32 :
     1061                                                 /**
     1062                                              * Touche Space
     1063                                              * Lance la lecture ou met le media en pause
     1064                                              */
     1065                                        if($(this).find('video,audio')[0].isFullScreen || ($('input:focus,textarea:focus').size() == 0)){
     1066                                                $(this).find('video,audio').ms_play_pause();
    10791067                                                e.preventDefault();
    10801068                                        }
    1081                                 }
    1082                                         else{
    1083                                                 $('video,audio').each(function(){
    1084                                                 if($(this)[0].isFullScreen||(($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended))){
    1085                                                         media_hover = $(this);
    1086                                                         media_hover.ms_play_pause();
    1087                                                         e.preventDefault();
    1088                                                 }
    1089                                         });
    1090                                         }
    1091                                 break;
    1092                                 case 38 : case 40 :
    1093                                     /**
    1094                                      * Touches Up (38) et Down (40)
    1095                                      * Baisse ou augmente de 10% le volume de la video en cours de lecture
    1096                                      */
    1097                                         if(media_hover){
    1098                                         if(media_hover[0].isFullScreen||($('input:focus,textarea:focus').size() == 0)){
    1099                                                 if(!media_hover[0].muted){
     1069                                        break;
     1070                                        case 38 : case 40 :
     1071                                            /**
     1072                                             * Touches Up (38) et Down (40)
     1073                                             * Baisse ou augmente de 10% le volume de la video en cours de lecture
     1074                                             */
     1075                                        if($(this).find('video,audio')[0].isFullScreen||($('input:focus,textarea:focus').size() == 0)){
     1076                                                if(!$(this).find('video,audio')[0].muted){
    11001077                                                                var delta  = (e.keyCode == 38) ? 1 : -1,
    1101                                                                         volume = media_hover[0].volume,
     1078                                                                        volume = $(this).find('video,audio')[0].volume,
    11021079                                                                        volume_diff = (delta > 0) ? '0.1' : '-0.1',
    11031080                                                                        volume_new = Math.round((volume + parseFloat(volume_diff))*10)/10;
    11041081                                                                if((volume_new <= 1) && (volume_new >= 0)){
    1105                                                                         media_hover[0].volume = volume_new;
     1082                                                                        $(this).find('video,audio')[0].volume = volume_new;
    11061083                                                                }
    11071084                                                        }
    11081085                                                e.preventDefault();
    11091086                                        }
    1110                                 }
    1111                                         else{
    1112                                                 $('video,audio').each(function(){
    1113                                                         if($(this)[0].isFullScreen||(($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended))){
    1114                                                         if(!$(this)[0].muted){
    1115                                                                         var delta  = (e.keyCode == 38) ? 1 : -1,
    1116                                                                                 volume = $(this)[0].volume,
    1117                                                                                 volume_diff = (delta > 0) ? '0.1' : '-0.1',
    1118                                                                                 volume_new = Math.round((volume + parseFloat(volume_diff))*10)/10;
    1119                                                                         if((volume_new <= 1) && (volume_new >= 0)){
    1120                                                                                 $(this)[0].volume = volume_new;
    1121                                                                         }
    1122                                                                 }
    1123                                                         e.preventDefault();
    1124                                                 }
    1125                                         });
    1126                                         }
    1127                                 break;
    1128                                 case 37 : case 39 :
    1129                                     /**
    1130                                      * Gauche (37) et droite (39)
    1131                                      * Avance ou recule de 5% la video en cours de lecture
    1132                                      * Il faut également modifier la valeur de la barre
    1133                                      */
    1134                                         if(media_hover){
    1135                                         if(media_hover[0].isFullScreen||($('input:focus,textarea:focus,select:focus').size() == 0)){
    1136                                                 var pourcent_actuel = ((media_hover[0].currentTime / media_hover[0].duration) * 100);
     1087                                        break;
     1088                                        case 37 : case 39 :
     1089                                            /**
     1090                                             * Gauche (37) et droite (39)
     1091                                             * Avance ou recule de 5% la video en cours de lecture
     1092                                             * Il faut également modifier la valeur de la barre
     1093                                             */
     1094                                        if($(this).find('video,audio')[0].isFullScreen||($('input:focus,textarea:focus,select:focus').size() == 0)){
     1095                                                var pourcent_actuel = (($(this).find('video,audio')[0].currentTime / $(this).find('video,audio')[0].duration) * 100);
    11371096                                                if(e.keyCode == 37) {
    11381097                                                        var new_percent = (pourcent_actuel >= 5) ? (pourcent_actuel - 5) : 0;
    1139                                                         media_hover.ms_seek_to_percent(new_percent,media_hover[0].slider,true);
     1098                                                        $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    11401099                                                }else{
    11411100                                                        var new_percent = (pourcent_actuel > 95) ? 100 : (pourcent_actuel + 5);
    1142                                                         media_hover.ms_seek_to_percent(new_percent,media_hover[0].slider,true);
     1101                                                        $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    11431102                                                }
    11441103                                                e.preventDefault();
     1104                                                e.stopPropagation();
    11451105                                        }
    1146                                 }
    1147                                         else{
    1148                                         $('video,audio').each(function(){
    1149                                                 if($(this)[0].isFullScreen||(($('input:focus,textarea:focus,select:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended))){
    1150                                                         var pourcent_actuel = (($(this)[0].currentTime / $(this)[0].duration) * 100);
    1151                                                         if(e.keyCode == 37) {
    1152                                                                 var new_percent = (pourcent_actuel >= 5) ? (pourcent_actuel - 5) : 0;
    1153                                                                 $(this).ms_seek_to_percent(new_percent,$(this)[0].slider,true);
    1154                                                         }else{
    1155                                                                 var new_percent = (pourcent_actuel > 95) ? 100 : (pourcent_actuel + 5);
    1156                                                                 $(this).ms_seek_to_percent(new_percent,$(this)[0].slider,true);
    1157                                                         }
    1158                                                         e.preventDefault();
    1159                                                 }
    1160                                         });
    1161                                         }
    1162                                 break;
     1106                                        break;
     1107                                }
    11631108                        }
    11641109                }
Note: See TracChangeset for help on using the changeset viewer.