Changeset 73255 in spip-zone


Ignore:
Timestamp:
Jun 4, 2013, 9:23:53 PM (7 years ago)
Author:
kent1@…
Message:

CSS :

Les balises audio doivent être en display block + un height par défaut en css

JAVASCRIPT :

On ajoute un argument ratio par défaut, permettant de redimensionner un media sans avoir ses metadonnées (preload="none"). Ce qui permet également d'avoir beaucoup de videos sur la même page sans toutes les précharger.

preload="none" par défaut, pour changer cela il faut passer un paramètre au modèle.

Dans le cas des vidéos, on ajoute une div ms_splash entre la video et les controls permettant par exemple d'afficher une icone play.

On utilise bind au lieu de addEventListener qui permet de chaîner tous les evenements

Réparation des touches de clavier qui étaient instanciées 2 fois et donc comptaient pour 2 (sans effet souvent)

On ajoute une fonction ms_buttons qui correspond à la modification des boutons de lecture (appelé depuis ms_play_pause)

MODELES :

Remplacement de balise #ARRAY en #LISTE
Passage de preload="metadata" à preload="none"
Passage d'un ratio calculé au javascript

NOTES :

On n'incrémente pas la version car peut être casse gueule, à tester

Location:
_plugins_/mediaspip_player/trunk
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/mediaspip_player/trunk/css/html5_controls.css

    r72360 r73255  
    1 .spip_documents.video{display:block;}
     1.spip_documents.video,
     2.spip_documents.audio{display:block;}
     3
     4audio{height:25px;display:block}
    25
    36.media{
     
    163166        margin-top:5px;
    164167}
     168
    165169.media_wrapper.loading .controls .progress_indicator,
    166 .media_wrapper.loading .controls .progress_back .ui-slider-handle{
     170.media_wrapper.loading .controls .progress_back .ui-slider-handle,
     171.video .media_wrapper.no_metadata .controls,
     172.media_wrapper .ms_splash{
    167173        display:none;
    168174}
     175.media_wrapper.video .ms_splash{
     176        width:100%;
     177        height:100%;
     178        position:absolute;
     179        left:0;
     180        top:0;
     181        cursor:pointer;
     182        z-index:1;
     183        background:url("images/play_white.png") center no-repeat;
     184        background-size:12%;
     185}
     186
     187.video .media_wrapper.no_metadata .ms_splash,
     188.video .media_wrapper.paused .ms_splash{
     189        display:block;
     190}
     191
     192.media_wrapper .controls{
     193        z-index:2;
     194}
     195
    169196.media_wrapper span.volume_button{
    170197        cursor:pointer;
  • _plugins_/mediaspip_player/trunk/javascript/mediaspip_player.js

    r72625 r73255  
    121121                                autoplay:false, // Lire automatiquement au chargement
    122122                                autoload:true, // Précharger automatiquement au chargement
    123                                 minwidth : null, // Largeur minimale
    124                                 movieSize : null,
    125                                 messages: true, // Afficher ou non les messages sur le lecteur
    126                                 volume: 100, // Niveau de volume au chargement
    127                                 volume_bloque: false, // bloque le niveau de volume
    128                                 volume_slider_orientation: 'horizontal', // Si on a les sliders, orientation du slider de volume
    129                                 muted : false, // Le lecteur n'est pas mute par défaut
    130                                 muted_bloque : false, // On autorise le switch mute/unmute sur le lecteur
    131                                 cookie_volume: false, // Garder le niveau de volume de l'utilisateur dans un cookie
    132                                 messages: true, // Affiche ou non les messages sur le lecteur
     123                                minwidth:null, // Largeur minimale
     124                                movieSize:null,
     125                                ratio:null,
     126                                messages:true, // Afficher ou non les messages sur le lecteur
     127                                volume:100, // Niveau de volume au chargement
     128                                volume_bloque:false, // bloque le niveau de volume
     129                                volume_slider_orientation:'horizontal', // Si on a les sliders, orientation du slider de volume
     130                                muted:false, // Le lecteur n'est pas mute par défaut
     131                                muted_bloque:false, // On autorise le switch mute/unmute sur le lecteur
     132                                cookie_volume:false, // Garder le niveau de volume de l'utilisateur dans un cookie
     133                                messages:true, // Affiche ou non les messages sur le lecteur
    133134                                boutons_caches:[]
    134135                        };
     
    181182                                        id.slider_control = id.slider_volume = false;
    182183                                        id.messages = options.messages;
     184                                        id.type = (media.is('video')) ? 'video' : 'audio';
    183185                                       
    184186                                        if(slider) id.slider = true;
     
    202204                                                else if(media.height() > 0) height = media.height();
    203205                                        }
    204        
    205                                         media.parent().wrapInner('<div class="media_wrapper loading '+class_wrapper+'"></div>');
    206                                         media.parents('.media_wrapper').height(height).width(width);
     206                                       
     207                                        media.parent().wrapInner('<div class="media_wrapper loading no_metadata '+id.type+' '+class_wrapper+'"></div>');
     208                                        if(id.type == 'video'){
     209                                                if(options.height)
     210                                                        media.parents('.media_wrapper').height(height);
     211                                                if(options.width)
     212                                                        media.parents('.media_wrapper').width(width);
     213                                        }else
     214                                                media.parents('.media_wrapper').width(width);
    207215                                        wrapper = media.parent();
    208216                                       
    209217                                        if(id.addcontrols){
    210                                                 controls = '<div class="controls small">'
     218                                                if(id.type == 'video')
     219                                                        controls = '<div class="ms_splash"></div>'
     220                                                else
     221                                                        controls = '';
     222                                                               
     223                                                controls += '<div class="controls small">'
    211224                                                        +'<div class="buttons_left">'
    212225                                                                +'<span class="play_pause_button" title="'+ms_player_lang.bouton_loading+'"></span>'
     
    234247                                                controls += ($.inArray('loop',options.boutons_caches) == '-1') ? '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>' : '';
    235248                                                controls +='</div>';
    236                                                 +'</div>';
    237249               
    238250                                                wrapper.append(controls);
    239251                                                control = wrapper.find('.controls');
    240252                                        }
     253
     254                                        if(id.type== 'video' && !height){
     255                                                height = media.parents('.media_wrapper').find('.controls').height();
     256                                                media.parents('.media_wrapper').add(media).height(height)
     257                                        }
     258                                               
    241259                                        if(options.minwidth && $(this).width() > options.minwidth){
    242                                                 $(this).width(options.minwidth);
    243                                                 wrapper.width($(this).width());
    244                                         }
    245                                         else if(options.minwidth){
    246260                                                wrapper.width(options.minwidth);
    247261                                        }
     
    255269                                       
    256270                                        if(media.prev().is('img')){
    257                                                 if(media.prev().width() > options.minwidth){
    258                                                         wrapper.width(media.prev().width());
    259                                                         wrapper.height(media.prev().height());
    260                                                 }else{
    261                                                         var img_height = media.prev().height(),
    262                                                                 ratio = options.minwidth / media.prev().width();
    263                                                         wrapper.width(options.minwidth).height(img_height*ratio);
    264                                                         media.prev().width(options.minwidth).height(img_height*ratio);
    265                                                 }
     271                                               
    266272                                                media.prev().wrap('<div class="html5_logo"></div>');
    267273                                                media.prev().click(function(){
     
    277283                                        }
    278284                                       
    279                                         id.addEventListener("loadedmetadata",function(e){
     285                                        media.bind("loadedmetadata",function(e){
    280286                                                media.ms_start('loadedmetadata');
    281                                                
     287                                                $(this).parents('.media_wrapper').removeClass('no_metadata').addClass('has_metadata');
    282288                                                /**
    283289                                                 * Cas d'un stream audio (Radio)
     
    288294                                                        remaining_time.addClass('total_time').attr('title','').html(ms_player_lang.info_streaming);
    289295                                                }
    290                                         },true);
    291                                        
    292                                         id.addEventListener("error", function(e){
     296                                                media.ms_resize_controls();
     297                                        }).bind("error", function(e){
    293298                                                if (id.error) {                                                 
    294299                                                        switch (id.error.code) {
     
    313318                                                        wrapper.removeClass('loading').addClass('player_error').find('.play_pause_button').attr('title',ms_player_lang.info_erreur);
    314319                                                }
    315                                         }, true);
    316        
    317                                         id.addEventListener("timeupdate", function(e){
     320                                        }).bind("timeupdate", function(e){
    318321                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    319322
     
    330333
    331334                                                media.ms_resize_controls();
    332                                         }, true);
    333        
    334                                         id.addEventListener("seeking",function(e){
     335                                        }).bind("seeking",function(e){
    335336                                                wrapper.addClass('seeking').find('.play_pause_button').attr('title',ms_player_lang.bouton_seeking);
    336                                         },true);
    337                                        
    338                                         id.addEventListener("seeked",function(e){
     337                                        }).bind("seeked",function(e){
    339338                                                wrapper.removeClass('seeking');
    340339                                                if(id.paused)
     
    342341                                                else
    343342                                                        wrapper.find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_lire);
    344                                         },true);
    345        
    346                                         id.addEventListener("progress", function(e){
     343                                        }).bind("progress", function(e){
    347344                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    348                                         },false);
    349                                        
    350                                         id.addEventListener("play", function(e){
     345                                        }).bind("pause", function(e){
     346                                                media.ms_buttons();
     347                                        }).bind("play", function(e){
    351348                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    352                                         },true);
    353                                        
    354                                         id.addEventListener("loadeddata", function(e){
    355                                                 if(control) media.ms_update_loaded(e);
    356                                         },true);
    357                                        
    358                                         id.addEventListener("ended", function(e){
     349                                                media.ms_buttons();
     350                                        }).bind("ended", function(e){
    359351                                                if(!id.islooping){
    360352                                                        wrapper.addClass('paused').find('.play_pause_button').removeClass('pause').attr('title',ms_player_lang.bouton_lire);
     
    364356                                                    id.play();
    365357                                                }
    366                                         }, true);
    367 
    368                                         id.addEventListener("volumechange", function(e){
     358                                        }).bind("loadeddata", function(e){
     359                                                if(control) media.ms_update_loaded(e);
     360                                        }).bind("volumechange", function(e){
    369361                                                media.ms_volume(false);
    370                                         }, true);
     362                                        }).click(function(){
     363                                                media.ms_play_pause();
     364                                        }).dblclick(function(e){
     365                                                media.ms_fullscreen();
     366                                                e.preventDefault();
     367                                                e.stopPropagation();
     368                                        });
    371369       
    372370                                        document.addEventListener(fullScreenApi.fullScreenEventName, function(e){
     
    376374                                        }, true);
    377375                                       
    378                                         media.click(function(){
    379                                                 media.ms_play_pause();
    380                                         });
    381                                        
    382                                         media.dblclick(function(e){
    383                                                 media.ms_fullscreen();
    384                                                 e.preventDefault();
    385                                                 e.stopPropagation();
     376                                        media.parent().find('.ms_splash').click(function(){
     377                                                if(id.paused && $(this).is(':visible'))
     378                                                        media.ms_play_pause();
    386379                                        });
    387380                                       
     
    475468                                                });
    476469                                        }
    477                                         //if((id.readyState == "4") || (id.readyState == "3"))
     470
    478471                                        media.ms_start('canplay');
    479472                                }
    480                         }else{
     473                        }else
    481474                                media.ms_test_fallback(options);
    482                         }
    483475                        this.trigger('init');
    484476                },
     
    491483                                elapsed_time = control.find('.elapsed_time'),
    492484                                remaining_time = control.find('.remaining_time');
    493                        
     485
    494486                        if(!id.mediacanplay || action == 'loadedmetadata'){
    495487                                if(wrapper.hasClass('player_error'))
     
    500492                                var width_container = media.width(), parent_width = wrapper.parent().width();
    501493                               
    502                                 if(id.videoHeight && id.videoWidth){
    503                                         var ratio_video = id.videoWidth/id.videoHeight;
    504                                         id.ratio = ratio_video;
    505                                         if(options.movieSize == 'adapt' && !id.isFullScreen && (!media.hasClass('noresize') || (options.movieSize != 'noresize'))){
    506                                                 /**
    507                                                  * En mode adapt :
    508                                                  * - on dimensionne la largeur à 100%
    509                                                  * - on dimensionne la hauteur à un ratio correspondant au ratio réel de la vidéo
    510                                                  * par rapport à la largeur du bloc parent
    511                                                  */
    512                                                 width_container = parent_width;
     494                                if(id.videoHeight && id.videoWidth)
     495                                        id.ratio = id.videoWidth/id.videoHeight;
     496                                else if(options.ratio)
     497                                        id.ratio = options.ratio;
     498                                else
     499                                        id.ratio = media.width()/media.height();
     500                               
     501                                if(options.movieSize == 'adapt' && !id.isFullScreen && (!media.hasClass('noresize') || (options.movieSize != 'noresize'))){
     502                                        /**
     503                                         * En mode adapt :
     504                                         * - on dimensionne la largeur à 100%
     505                                         * - on dimensionne la hauteur à un ratio correspondant au ratio réel de la vidéo
     506                                         * par rapport à la largeur du bloc parent
     507                                         */
     508                                        width_container = parent_width;
     509                                        if(id.videoHeight && id.videoWidth)
    513510                                                var ratio = (width_container/id.videoWidth),
    514511                                                        height_final = (id.videoHeight*ratio).toFixed();
    515                                                 wrapper.add(media).animate({height:height_final+'px',width:'100%'},500,function(){
    516                                                         media.ms_resize_controls();
     512                                        else
     513                                                var height_final = width_container/id.ratio;
     514                                       
     515                                        if(id.type == 'video'){
     516                                                wrapper.animate({height:height_final+'px',width:'100%'},'fast',function(){
     517                                                        media.animate({height:'100%',width:'100%'},'fast').attr('height',false).ms_resize_controls();
    517518                                                });
    518                                         }else if(!media.hasClass('noresize') && (options.movieSize != 'noresize')){
    519                                                 /**
    520                                                  * En mode normal, on redimentionne la hauteur de la vidéo en fonction
    521                                                  * du ratio réel récupéré des métadonnées
    522                                                  */
     519                                        }else{
     520                                                wrapper.animate({width:'100%'},'fast',function(){
     521                                                        media.animate({width:'100%'},'fast').ms_resize_controls();
     522                                                });
     523                                        }
     524                                }else if(!media.hasClass('noresize') && (options.movieSize != 'noresize')){
     525                                        /**
     526                                         * En mode normal, on redimentionne la hauteur de la vidéo en fonction
     527                                         * du ratio réel récupéré des métadonnées
     528                                         */
     529                                        if(!options.height){
    523530                                                var media_height = media.width()/id.ratio;
    524531                                                media.attr('height','');
    525                                                 wrapper.css({'height':media_height+'px'});
    526                                         }
    527                                 }
     532                                                if(id.type == 'video')
     533                                                        wrapper.height(media_height);
     534                                        }else{
     535                                                var media_width = media.height()*id.ratio;
     536                                                if(id.type == 'video'){
     537                                                        wrapper.width(media_width);
     538                                                        media.width('100%').attr('width','');
     539                                                }
     540                                        }
     541                                }
     542
    528543                                if(wrapper.hasClass('loading'))
    529544                                        wrapper.removeClass('loading').addClass('paused').find('.play_pause_button').attr('title',ms_player_lang.bouton_lire);
     
    533548
    534549                                elapsed_time.text(ms_second_to_time(id.currentTime));
    535                                 media.ms_resize_controls();
    536                                 if((id.networkState == 2) && !isNaN(id.duration) && (typeof(id.buffered) != 'undefined') && (typeof(id.buffered.end(0)) == 'number') && id.buffered.end(0) > 0){
     550               
     551                                try {
     552                    arg.buffer = id.buffered.end(null);
     553                } catch (ignored) {}
     554               
     555                                if((id.networkState == 2) && id.duration && !isNaN(id.duration) && id.buffer){
    537556                                        var percent_load = ms_anything_to_percent(id.buffered.end(0),id.duration);
    538557                                        control.find('.progress_buffered').css('width',percent_load+'%');
     
    590609                                                });
    591610                                        }
    592                                         media.ms_resize_controls();
    593611                                }
    594612                               
     
    616634                                $(this).focus();
    617635                        });
    618                         $(this).parents('.media_wrapper').keydown(function(e) {
     636                        $(this).parents('.media_wrapper').unbind('keydown').keydown(function(e) {
    619637                                $(this).unbind('keyup').keyup(function(e){e.stopPropagation();e.preventDefault();}).ms_activate_keys(e);
    620638                        });
     639                        media.ms_resize_controls();
    621640                        this.trigger('start');
     641                },
     642                ms_buttons : function(){
     643                        if($(this)[0].paused){
     644                                $(this).parent('.media_wrapper').addClass('paused').find('.play_pause_button').removeClass('pause').attr('title',ms_player_lang.bouton_lire);
     645                                $(this).ms_messages('pause',ms_player_lang.statut_pause);
     646                        }
     647                        else if ($(this)[0].ended){
     648                                $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
     649                                $(this)[0].currentTime = $(this)[0].startTime ? $(this)[0].startTime : '0';
     650                                if(!$(this)[0].options.volume_bloque && cookies && $(this)[0].options.cookie_volume){
     651                                        var volume_cookie = parseFloat($.cookie('ms_volume'));
     652                                        if((volume_cookie >= 0) && (volume_cookie <= 1))
     653                                                $(this)[0].volume = volume_cookie;
     654                                        if($.cookie('ms_volume_muted') == 'muted')
     655                                                $(this)[0].muted = true;
     656                                }
     657                        }
     658                        else{
     659                                $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
     660                                $(this).ms_messages('play',ms_player_lang.statut_play);
     661                                if(!$(this)[0].options.volume_bloque && cookies && $(this)[0].options.cookie_volume){
     662                                        var volume_cookie = parseFloat($.cookie('ms_volume'));
     663                                        if((volume_cookie >= 0) && (volume_cookie <= 1))
     664                                                $(this)[0].volume = volume_cookie;
     665                                        if($.cookie('ms_volume_muted') == 'muted')
     666                                                $(this)[0].muted = true;
     667                                }
     668                        }
    622669                },
    623670                ms_play_pause : function(){
     
    625672                                var options = $(this)[0].options;
    626673                                if($(this)[0].paused){
    627                                         $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
    628                                         $(this).ms_messages('play',ms_player_lang.statut_play);
    629                                         if(!options.volume_bloque && cookies && options.cookie_volume){
    630                                                 var volume_cookie = parseFloat($.cookie('ms_volume'));
    631                                                 if((volume_cookie >= 0) && (volume_cookie <= 1))
    632                                                         $(this)[0].volume = volume_cookie;
    633                                                 if($.cookie('ms_volume_muted') == 'muted')
    634                                                         $(this)[0].muted = true;
    635                                         }
    636674                                        $(this)[0].play();
    637675                                        this.trigger('play');
    638676                                }else if ($(this)[0].ended){
    639                                         $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
    640                                         $(this)[0].currentTime = $(this)[0].startTime ? $(this)[0].startTime : '0';
    641                                         if(!options.volume_bloque && cookies && options.cookie_volume){
    642                                                 var volume_cookie = parseFloat($.cookie('ms_volume'));
    643                                                 if((volume_cookie >= 0) && (volume_cookie <= 1))
    644                                                         $(this)[0].volume = volume_cookie;
    645                                                 if($.cookie('ms_volume_muted') == 'muted')
    646                                                         $(this)[0].muted = true;
    647                                         }
    648677                                        $(this)[0].play();
    649678                                        this.trigger('play');
    650679                                }else{
    651                                         $(this).parent('.media_wrapper').addClass('paused').find('.play_pause_button').removeClass('pause').attr('title',ms_player_lang.bouton_lire);;
    652                                         $(this).ms_messages('pause',ms_player_lang.statut_pause);
    653680                                        $(this)[0].pause();
    654681                                        this.trigger('pause');
     
    808835                        if($(this)[0].mediacanplay){
    809836                                if(!$(this)[0].isFullScreen){
    810                                         $(this)[0].isFullScreen = true;
    811837                                        $(this)[0].videoOrigWidth = $(this).width();
    812838                                        $(this)[0].videoOrigHeight = $(this).height();
     
    822848                                                });
    823849                                        }
     850                                        $(this)[0].isFullScreen = true;
    824851                                }else{
    825                                         $(this)[0].isFullScreen = false;
    826852                                        if (fullScreenApi.supportsFullScreen) {
    827853                                                (fullScreenApi.prefix === '') ? document.cancelFullScreen() : document[fullScreenApi.prefix + 'CancelFullScreen']();
     
    846872                                        container.add($(this)).trigger('fullscreen_resize').unbind('fullscreen_resize');
    847873                                        container.find('.controls').addClass('small').find('span.fullwindow_button').attr('title',ms_player_lang.bouton_fullscreen);
     874                                        $(this)[0].isFullScreen = false;
    848875                                }
    849876                        }
     
    860887                       
    861888                        if (fullScreenApi.supportsFullScreen) {
    862                                 container.css({width:'100%',height:'100%'}).addClass('media_wrapper_full').find('.controls').removeClass('small');
    863                                 $(this).css({width:'100%',height:'100%'});
    864889                                (fullScreenApi.prefix === '') ? id_container.requestFullScreen() : id_container[fullScreenApi.prefix + 'RequestFullScreen']();
     890                                container.css({width:'100%',height:'100%',left:'0',top:'0'}).addClass('media_wrapper_full').find('.controls').removeClass('small');
    865891                                $(this).ms_resize_controls();
    866892                        }else{
     
    903929                                play_width = control.find('.buttons_left').outerWidth()+parseFloat(control.find('.buttons_left').css('margin-left'))+parseFloat(control.find('.buttons_left').css('margin-right')),
    904930                                sound_width = control.find('.buttons_right').outerWidth()+parseFloat(control.find('.buttons_right').css('margin-left'))+parseFloat(control.find('.buttons_right').css('margin-right')),
    905                                 progresswidth = parseFloat(control.width())-parseFloat(play_width)-parseFloat(sound_width) - parseFloat(control.find('.progress_bar').css('border-left-width')) - parseFloat(control.find('.progress_bar').css('border-right-width'))-parseFloat(control.find('.progress_bar').css('margin-right')) - parseFloat(control.find('.progress_bar').css('margin-left')) - parseFloat(control.find('.progress_bar').css('padding-right')) - parseFloat(control.find('.progress_bar').css('padding-left'));
     931                                progresswidth = parseFloat(control.width())-parseFloat(play_width)-parseFloat(sound_width) - parseFloat(control.find('.progress_bar').css('border-left-width')) - parseFloat(control.find('.progress_bar').css('border-right-width'))-parseFloat(control.find('.progress_bar').css('margin-right')) - parseFloat(control.find('.progress_bar').css('margin-left')) - parseFloat(control.find('.progress_bar').css('padding-right')) - parseFloat(control.find('.progress_bar').css('padding-left')) -1;
    906932                       
    907933                        control.find('.progress_bar').width(progresswidth);
     
    910936                                elapsed_width = control.find(".elapsed_time").outerWidth()+parseFloat(control.find('.elapsed_time').css('margin-left'))+parseFloat(control.find('.elapsed_time').css('margin-right'));
    911937                       
    912                         if(control.find(".remaining_time").is(':hidden'))
    913                                 remaining_width = 0;
    914 
    915                         var progressback_width = progresswidth - elapsed_width - remaining_width - parseFloat(control.find('.progress_back').css('border-left-width')) - parseFloat(control.find('.progress_back').css('border-right-width'))-parseFloat(control.find('.progress_back').css('margin-right')) - parseFloat(control.find('.progress_back').css('margin-left')) - parseFloat(control.find('.progress_back').css('padding-right')) - parseFloat(control.find('.progress_back').css('padding-left'))-1;
     938                        if(control.find(".remaining_time").is(':hidden')) remaining_width = 0;
     939
     940                        var progressback_width = progresswidth - elapsed_width - remaining_width - parseFloat(control.find('.progress_back').css('border-left-width')) - parseFloat(control.find('.progress_back').css('border-right-width'))-parseFloat(control.find('.progress_back').css('margin-right')) - parseFloat(control.find('.progress_back').css('margin-left')) - parseFloat(control.find('.progress_back').css('padding-right')) - parseFloat(control.find('.progress_back').css('padding-left'))-2;
    916941                       
    917942                        if(slider && progressback_width < 0 && !force){
     
    10381063                                                e.preventDefault();
    10391064                                        if (!fullScreenApi.supportsFullScreen) {
    1040                                                 if($(this).find('video')[0].isFullScreen){
     1065                                                if($(this).find('video')[0].isFullScreen)
    10411066                                                        $(this).find('video').ms_fullscreen();
    1042                                                 }
    10431067                                        }
    10441068                                                break;
     
    10581082                                             * Active ou désactive le mode boucle (loop) sur le média en cours de lecture
    10591083                                             */
    1060                                                 if($('input:focus,textarea:focus').size() == 0){
     1084                                                if($(this).find('video,audio')[0].isFullScreen || $('input:focus,textarea:focus').size() == 0){
    10611085                                                        $(this).find('video,audio').ms_loop();
    10621086                                                e.preventDefault();
     
    10681092                                             * Mute ou unmute
    10691093                                             */
    1070                                                 if($('input:focus,textarea:focus').size() == 0){
    1071                                                 $(this).find('.volume_button').click();
     1094                                                if($(this).find('video,audio')[0].isFullScreen || $('input:focus,textarea:focus').size() == 0){
     1095                                                        $(this).find('video,audio').ms_volume(true);
    10721096                                                e.preventDefault();
    10731097                                                }
     
    10781102                                              * Lance la lecture ou met le media en pause
    10791103                                              */
     1104                                               
    10801105                                        if($(this).find('video,audio')[0].isFullScreen || ($('input:focus,textarea:focus').size() == 0)){
    10811106                                                $(this).find('video,audio').ms_play_pause();
     
    11091134                                        if($(this).find('video,audio')[0].isFullScreen||($('input:focus,textarea:focus,select:focus').size() == 0)){
    11101135                                                var pourcent_actuel = (($(this).find('video,audio')[0].currentTime / $(this).find('video,audio')[0].duration) * 100);
    1111                                                 if(e.keyCode == 37) {
     1136                                                if(e.keyCode == 37)
    11121137                                                        var new_percent = (pourcent_actuel >= 5) ? (pourcent_actuel - 5) : 0;
    1113                                                 }else{
     1138                                                else
    11141139                                                        var new_percent = (pourcent_actuel > 95) ? 100 : (pourcent_actuel + 5);
    1115                                                 }
    11161140                                                $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    11171141                                                e.preventDefault();
  • _plugins_/mediaspip_player/trunk/modeles/application.html

    r69583 r73255  
    44        Si l'extension est mp4 ou ogg, c'est une video
    55
    6 ][(#EXTENSION|in_array{#ARRAY|push{mp4}|push{ogg}}|oui)
     6][(#EXTENSION|in_array{#LISTE{mp4,ogg}}|oui)
    77        [(#INCLURE{fond=modeles/video}{id=#ID_DOCUMENT}{env}{emb=' '})]
    8 ][(#EXTENSION|in_array{#ARRAY|push{mp4}|push{ogg}}|non)
     8][(#EXTENSION|in_array{#LISTE{mp4,ogg}}|non)
    99[(#REM) on trouvera plusieurs variable de hauteur/largeur
    1010- les balises #HAUTEUR et #LARGEUR
  • _plugins_/mediaspip_player/trunk/modeles/audio.html

    r72680 r73255  
    1919        -* muted_bloque oui : si oui l'utilisateur ne peut switcher entre mute et unmute
    2020        -* boutons_caches string : liste de boutons séparés par des virgule (ex: fullscreen,loop,volume)
     21       
    2122]
    2223<BOUCLE_tous(DOCUMENTS types_documents){id_document=#ID}{tout}>
     
    6566        id='media_#GET{id_document_voir}'>
    6667        #GET{logo}
    67         <audio id="audio_[(#GET{id_document_voir})]"[(#ENV{controls,true}|in_array{#ARRAY{0,false,1,non}}|non)
    68                 controls][(#ENV{autoplay,non}|in_array{#ARRAY{0,false,1,non}}|non)
    69                 autoplay="autoplay"][(#ENV{autobuffer,#ENV{preload,metadata}}|in_array{#ARRAY{0,false,1,non}}|non)[
    70                 (#ENV{autobuffer,#ENV{preload,metadata}}|in_array{#ARRAY{0,auto,1,metadata}}|?{[preload="(#ENV{autobuffer,#ENV{preload,metadata}})"],preload="metadata"})]][(#ENV{loop,non}|in_array{#ARRAY{0,false,1,non}}|non)
     68        <audio id="audio_[(#GET{id_document_voir})]"[(#ENV{controls,true}|in_array{#LISTE{false,non,none}}|non)
     69                controls][(#ENV{autoplay,non}|in_array{#LISTE{false,non,none}}|non)
     70                autoplay="autoplay"][
     71                (#ENV{autobuffer,#ENV{preload,none}}|in_array{#LISTE{false,non,none}}|?{preload="none",[(#ENV{autobuffer,#ENV{preload,none}}|in_array{#LISTE{auto,none}}|?{[preload="(#ENV{autobuffer,#ENV{preload,none}})"],preload="metadata"})]})][(#ENV{loop,non}|in_array{#LISTE{false,non,none}}|non)
    7172                loop][
    7273                width="(#GET{largeur}|match{%}|?{'',#GET{largeur}})"]
    73                 style="[width:(#GET{largeur}|match{%}|?{#GET{largeur},[(#GET{largeur})px]});][height:(#GET{hauteur})px]">
     74                style="[width:(#GET{largeur}|match{%}|?{#GET{largeur},[(#GET{largeur})px]});][height:(#ENV{hauteur})px]">
    7475                        <BOUCLE_ssdoc_mp3(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{statut==.*}{extension IN mp3}{tout}>
    7576                        <source type="#MIME_TYPE" src="[(#FICHIER|timestamp|url_absolue)]" />
    7677                        </BOUCLE_ssdoc_mp3>
    7778                        <BOUCLE_ssdoc(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{statut==.*}{extension IN ogg}{tout}>[<source type="#MIME_TYPE" src="(#FICHIER|timestamp|url_absolue)" />]</BOUCLE_ssdoc>
    78                         [(#EXTENSION|in_array{#ARRAY{0,ogg,1,oga,2,weba,3,mp3,4,webm}}|et{#EXTENSION|in_array{#GET{variantes}}|non}|oui)<source type="#MIME_TYPE" src="[(#FICHIER|timestamp|url_absolue)]" />]
    79                         [(#EXTENSION|in_array{[(#ARRAY|push{oga}|push{ogg}|push{mp3}|push{flac})]}|non)
     79                        [(#EXTENSION|in_array{#LISTE{ogg,oga,weba,mp3,webm}}|et{#EXTENSION|in_array{#GET{variantes}}|non}|oui)<source type="#MIME_TYPE" src="[(#FICHIER|timestamp|url_absolue)]" />]
     80                        [(#EXTENSION|in_array{#LISTE{oga,ogg,mp3,flac}}|non)
    8081                        <object width='#GET{largeur}' height='#GET{hauteur}' type="#MIME_TYPE">
    8182                                <param name='movie' value='[(#FICHIER|timestamp|url_absolue)]' />
     
    9899                                flasherror:erreur_flash,[
    99100                                (#ENV{min_width}|oui)[minwidth : '(#ENV{min_width}|match{%}|?{null,#ENV{min_width}})',]][(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui)
    100                                 cookie_volume:true,][(#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)
     101                                cookie_volume:true,][(#ENV{autoplay,#ENV{autostart,non}}|in_array{#LISTE{false,non,none}}|non)
    101102                                autoplay:true,][(#ENV{volume}|is_numeric|oui)
    102103                                volume:#ENV{volume},][(#ENV{volume_bloque}|=={oui}|oui)
     
    114115                $(window).load(function(){
    115116                        ms_player_init_[(#GET{id_document_voir})]();
     117                });
     118                $(function(){
    116119                        onAjaxLoad(function(){setTimeout(function(){ms_player_init_[(#GET{id_document_voir})]();},500)});
    117120                });
  • _plugins_/mediaspip_player/trunk/modeles/player_neolao_video.html

    r69583 r73255  
    4848]<BOUCLE_doc (DOCUMENTS) {id_document}>
    4949[(#SET{type,maxi})]
    50 [(#GET{type}|in_array{#ARRAY{0,maxi,1,mini,2,js}}|non)#SET{type,maxi}]
     50[(#GET{type}|in_array{#LISTE{maxi,mini,js}}|non)#SET{type,maxi}]
    5151
    5252[(#REM)
  • _plugins_/mediaspip_player/trunk/modeles/video.html

    r71400 r73255  
    2828- GET{hauteur} et GET{largeur} correspondent prioritairement a ENV,
    2929  puis les balises LARGEUR/HAUTEUR sauf si il y a un controleur
    30 ][
     30]
     31[(#HAUTEUR|>{0}|et{#LARGEUR|>{0}}|oui)[(#SET{ratio,[(#LARGEUR|div{#HAUTEUR})]})]]
     32[
    3133(#SET{hauteur,#ENV{hauteur,#HAUTEUR}})][
    3234(#SET{largeur,#ENV{largeur,#LARGEUR}})][(#REM)
     
    4244        |et{#LARGEUR}
    4345        |et{[(#LARGEUR|>{#ENV{largeur,''}})]}|oui)
    44         [(#SET{ratio,[(#LARGEUR|div{#ENV{largeur}})]})]
     46        [(#GET{ratio}|non)
     47        [(#SET{ratio,[(#LARGEUR|div{#ENV{largeur}})]})]]
    4548        #SET{hauteur,#HAUTEUR|div{#GET{ratio}}|floor}
    4649][(#REM)
     
    5760        |et{#GET{ratio}|=={''}}
    5861        |et{[(#HAUTEUR|>{#ENV{hauteur}})]}|oui)
    59         [(#SET{ratio,[(#HAUTEUR|div{#ENV{hauteur}})]})]
     62        [(#GET{ratio}|non)
     63        [(#SET{ratio,[(#HAUTEUR|div{#ENV{hauteur}})]})]]
    6064        #SET{largeur,#LARGEUR|div{#GET{ratio}}|floor}
    6165][(#REM)
     
    8892        [(#SET{logo,[(#ENV{logo,#LOGO_DOCUMENT{vignette}|extraire_attribut{src}}|url_absolue)]})]
    8993]
    90 [(#SET{id_document_voir, [(#ID_DOCUMENT)_][(#VAL{0}|rand{100000})]})]
    91 
    92 #SET{titre,#TITRE}
     94[(#SET{id_document_voir, [(#ID_DOCUMENT)_][(#VAL{0}|rand{100000})]})]
     95[(#SET{titre,#TITRE})]
    9396[(#SET{descriptif,[(#DESCRIPTIF|PtoBR)]})]
    9497[(#SET{notes,[(#NOTES|PtoBR)]})]
     
    9699</B_tous>
    97100[(#ENV{fichier}|et{#ENV{fichier}|file_exists}|oui)
    98         [(#ENV{fichier}|substr{-3}|=={flv}|oui)
    99         #SET{type,video/x-flv}]
    100         [(#ENV{fichier}|substr{-3}|=={mp4}|oui)
    101         #SET{type,video/mp4}]
    102         [(#GET{type}|oui)
    103         [(#SET{id_document_voir,[(#VAL{0}|rand{1000000000000})]})]]
     101        [(#ENV{fichier}|substr{-3}|=={flv}|oui)#SET{type,video/x-flv}]
     102        [(#ENV{fichier}|substr{-3}|=={mp4}|oui)#SET{type,video/mp4}]
     103        [(#GET{type}|oui)[(#SET{id_document_voir,[(#VAL{0}|rand{1000000000000})]})]]
    104104]
    105105<//B_tous>
    106 <BOUCLE_si_id(CONDITION){si #GET{id_document_voir}|oui}>
     106
     107<BOUCLE_si_id(CONDITION){si #GET{id_document_voir}|oui}>[(#SET{variantes,#ARRAY})]
    107108<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})] media video'[
    108109        style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']
    109110        id='media_#GET{id_document_voir}'>
    110111        <video id="video_#GET{id_document_voir}"[
    111                 (#ENV{controls,true}|in_array{#ARRAY{0,false,1,non}}|non)controls ][
    112                 (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay ][(#ENV{autobuffer,#ENV{preload,metadata}}|in_array{#ARRAY{0,false,1,non,2,none}}|non)[
    113                 (#ENV{autobuffer,#ENV{preload,metadata}}|in_array{#ARRAY{0,auto,1,metadata}}|?{[preload="(#ENV{autobuffer,#ENV{preload,metadata}})"],preload="metadata"})]][(#ENV{loop,non}|in_array{#ARRAY{0,false,1,non}}|non)
     112                (#ENV{controls,true}|in_array{#LISTE{false,non,none}}|non)controls ][
     113                (#ENV{autoplay,#ENV{autostart,non}}|in_array{#LISTE{false,non,none}}|non)autoplay ][(#ENV{autobuffer,#ENV{preload,none}}|in_array{#LISTE{false,non,none}}|?{preload="none",[
     114                (#ENV{autobuffer,#ENV{preload,none}}|in_array{#LISTE{auto,metadata}}|?{[preload="(#ENV{autobuffer,#ENV{preload,none}})"],preload="metadata"})]})][(#ENV{loop,non}|in_array{#LISTE{false,non,none}}|non)
    114115                loop][(#ENV{noresize}?{' class="noresize" ',''})][
    115116                width="(#GET{largeur}|match{%}|?{'',#GET{largeur}})"][
     
    118119                style="width:(#GET{largeur}|match{%}|?{#GET{largeur}})"]
    119120                >
    120                 #SET{variantes,#ARRAY}
    121121                <BOUCLE_variantes(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{statut==.*}>#SET{variantes,#GET{variantes}|push{#EXTENSION}}</BOUCLE_variantes>[
    122122                (#EXTENSION|=={mp4}|et{#EXTENSION|in_array{#GET{variantes}}|non}|oui)
    123                         <source[ type='(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
     123                        <source[ type='(#EXTENSION|in_array{#LISTE{mp4,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
    124124                ]<BOUCLE_ssdoc_mp4(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{extension IN m4v,mp4,mov}{par extension}{tout}>
    125                         <source[ type='(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
     125                        <source[ type='(#EXTENSION|in_array{#LISTE{mp4,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
    126126                </BOUCLE_ssdoc_mp4>
    127127                <BOUCLE_ssdoc(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{extension IN flv,ogv,ogg,webm}{par extension}{tout}>
    128                         <source[ type='(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
     128                        <source[ type='(#EXTENSION|in_array{#LISTE{mp4,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
    129129                </BOUCLE_ssdoc>[(#ENV{fichier}|oui)
    130130                <source type="#GET{type}" src="[(#ENV{fichier}|timestamp|url_absolue)]" />]
    131131                <BOUCLE_doc_orig(DOCUMENTS){id_document}{tout}>
    132                         <source[ type='(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{"video/mp4",#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
     132                        <source[ type='(#EXTENSION|in_array{#LISTE{mp4,m4v}}|?{"video/mp4",#MIME_TYPE}|trim)[; codecs="(#VIDEOCODECID)[,(#AUDIOCODECID)]"]'] src="[(#FICHIER|timestamp|url_absolue)]" />
    133133                </BOUCLE_doc_orig>
    134         </video>
    135         [(#ENV{infos}|=={non}|non)
    136                 [<div class='spip_doc_titre'><strong>(#GET{titre})</strong></div>]
    137                 [<div class='spip_doc_descriptif'>(#GET{descriptif})[(#GET{notes}|PtoBR)]</div>]
    138         ]
     134        </video>[(#ENV{infos}|=={non}|non)
     135        [<div class='spip_doc_titre'><strong>(#GET{titre})</strong></div>]
     136        [<div class='spip_doc_descriptif'>(#GET{descriptif})[(#GET{notes}|PtoBR)]</div>]]
    139137</div>
    140138<script type="text/javascript">
     
    148146                                movieSize:'(#ENV{moviesize})',][(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui)
    149147                                cookie_volume:true,][
    150                                 (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
     148                                (#ENV{autoplay,#ENV{autostart,non}}|in_array{#LISTE{false,non,none}}|non)autoplay:true,][
    151149                                (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
    152150                                (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
    153151                                (#ENV{muted}|=={oui}|oui)muted : true,][
     152                                (#GET{ratio}|oui)ratio : #GET{ratio},][
    154153                                (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
    155154                                (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],][(#GET{largeur}|oui)[
    156                                 width:'(#GET{largeur}|match{%}|?{[(#GET{largeur})],[(#GET{largeur}|match{px}|?{[(#GET{largeur}|replace{px,''})],[(#GET{largeur})]})]})',]
     155                                width:'(#ENV{largeur}|match{%}|?{[(#ENV{largeur})],[(#ENV{largeur}|match{px}|?{[(#ENV{largeur}|replace{px,''})],[(#ENV{largeur})]})]})',]
     156                                ][height:'(#ENV{hauteur})',
    157157                                ]volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
     158                               
    158159                        });
    159160                }
  • _plugins_/mediaspip_player/trunk/prive/inclure/document_desc_liste_conversions.html

    r69583 r73255  
    44]
    55<BOUCLE_document(DOCUMENTS){id_document=#ENV{id_document,#ENV{id}}}{statut==.*}>
    6 [(#MODE|!={conversion}|et{#MEDIA|in_array{#ARRAY{0,video,1,audio}}}|oui)<div style="overflow:auto">
     6[(#MODE|!={conversion}|et{#MEDIA|in_array{#LISTE{video,audio}}}|oui)<div style="overflow:auto">
    77<INCLURE{fond=prive/inclure/ajouter_conversion,id_objet=#ID_DOCUMENT,objet=document,env} />
    88</div>]
     
    1111        #ANCRE_PAGINATION
    1212        <strong>[(#GRAND_TOTAL|singulier_ou_pluriel{mediaspip_player:info_une_conversion,mediaspip_player:info_nb_conversion})]</strong>
    13         <BOUCLE_conversions(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{par id_document} {statut==.*}{pagination 5 doc#ID_DOCUMENT}>
     13        <BOUCLE_conversions(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{par id_document} {statut==.*}{pagination #ENV{pagination,5} doc#ID_DOCUMENT}>
    1414                #MODELE{document_desc,id_document,objet=document,id_objet=#ENV{id_document}}
    1515        </BOUCLE_conversions>
    16         [<p class="pagination">(#PAGINATION{prive})</p>]
     16        [<p class="pagination">(#PAGINATION{#ENV{type_pagination,prive}})</p>]
    1717</div>
    1818</B_conversions>
    19 
    2019</BOUCLE_document>
Note: See TracChangeset for help on using the changeset viewer.